美文网首页技术专栏
JS事件截流 / 防抖

JS事件截流 / 防抖

作者: ErrorCode233 | 来源:发表于2018-07-19 11:51 被阅读22次

    JS事件截流

    在使用scroll,resize,mousemove等方法的时候,由于触发次数过于频繁,一般会使用一个节流的方法来实现方法的调用

    //首先定义一个全局函数
    let timeOutId = null;
    //定义一个延时定制器的回掉函数
    function callBack(){
        const top = warpper.getBoundingClientRect().top;
        if(top && top < winHeight){
            loadMoreFn();
        }
    }
    //scroll方法
    window.addEventListener('scroll',()=>{
        // 如果isLoadingMore = true 那么不做处理
    
        //如果timeOutId被赋值了,那么就清理掉延迟定时器
        if(timeOutId){
            clearTimeout(timeOutId);
        }
    
        //回调函数延迟50毫秒触发
        timeOutId = setTimeout(callBack,50);
    },false);
    
    
    

    使用这种方法可以减少scroll事件不必要的触发函数,是一个很好的节省页面性能的方法

    相关文章

      网友评论

        本文标题:JS事件截流 / 防抖

        本文链接:https://www.haomeiwen.com/subject/hittmftx.html