函数防抖与函数节流

函数防抖:就是将多次执行变为一次执行。举个例子，当我们在滚动窗口的时候执行一段代码，如果滚动一次执行一次的话，我们滚动的可能会很快，这样显然是很不合理的。所以我们可以当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。下面我们来实现一个防抖函数

function debounce(fn,wait){
    var timeout = null;
    return function(){
        if(timeout !==null) clearTimeout(timeout);
        timeout = setTimeout(fn,wait)
    }
}
//处理函数
function handle(){
    console.log(Math.random())
}
//滚动事件
window.addEventlistener('scroll',debounce(handle,1000))

函数节流:高频触发事件的时候，我们可以在规定时间段内触发一次。

下面我们来实现一下

1.首次不执行
function throttle(fn,delay=100){
 //首先设定一个变量，在没有执行我们的定时器时为null
 let timer = null;
 return function(){
 //当我们发现这个定时器存在时，则表示定时器已经在运行中，需要返回
 if(timer) return;
 timer = setTimeout(()=>{
 fn.apply(this,arguments);
 timer = null;
 },delay);
 }
}
2.首次执行
function throttle2(fn,delay=100){
 let last = 0;
 return function(){
 let curr = +new Date();
 if(curr - last > delay){
 fn.apply(this,arguments);
 last = curr;
 }
 }
}