防抖和节流复习知识点

159 阅读1分钟

防抖:

触发高频函数事件后,n秒内函数只能执行一次,如果在n秒内这个事件再次被触发的话,那么会重新计算时间。

节流:

所谓节流,就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率

先来一个例子 

监听 滑轮滚动距离 回到顶部的操作

  function showtop() {        var scrollTop = document.body.scrollTop|| document.documentElement.scrollTop;        console.log("滚动条位置"+scrollTop) ;               }

 window.onscroll = showtop()
只要一滚动 就会产生许多滚动事件 也就会执行许多次代码 非常消耗内存使用率 

所以这里可以使用防抖  防抖定义为让某个时间期限内 时间处理函数执行一次
防抖的代码
        function debounce(fn,delay){
         let timer = null;
            return function(){
               if(timer){
        clearTimeout(timer);
    }
timrer = setTimeout(fn,delay);
}
}
最后再调用这个函数即可
window .onscroll = debounce(showTop,1000)
当触发以后 一秒后 打印这个距离 只执行一次 所以也就实现了防抖

节流 根据上面的触发 当用户没有停止 一直拉动滚动条 也就不会执行  

技能冷却时间  函数执行一次 某个时间段失效

代码如下

function throttle(fn,delay){

}

{let vlid =true

return function(){

if(!vlid){

return false;

}else{

valid =fasle;

setTimeout(function(){

fn();

valid =  true

},1000)}

}

}