JS 函数防抖(debounce)与函数节流(throttle)

在平时项目开发的时候，会有很多场景会频繁触发事件，比如说搜索框实时发请求，onmousemove, resize, onscroll等等，有些时候，我们并不能或者不想频繁触发事件，咋办呢？这时候就应该用到函数防抖和函数节流了！函数节流和函数防抖，两者都是优化高频率执行js代码的一种手段。

比如下面的这个例子：

正常情况下，如果我们不做处理的话，只要滚动，就会触发我们绑定的事件，但通常这个并不是我们需要的，因为这样的，触发事件频繁的话，性能不是很好，这个时候我们就可以使用函数防抖和节流来处理了，如下

函数防抖：主要是依靠定时器，设置一个时间，达不到我们设置的时间，就可以将定时器及时清除，那么绑定的事件也不会触发了

//函数防抖   function debounce(callback,delay){        var timer = null;        return function(e){          clearTimeout(timer)          timer =  setTimeout(()=>{            callback.call(e)           },delay)          }       }

使用函数防抖之后的事件绑定

window.onscroll = debuence(function(){    console.log("页面滚动了")   },500)

函数节流：实现的原理，主要是利用时间戳，利用两次的时间戳差值跟我们设置的值进行比较，不满足条件的话则不触发事件。

//函数节流   function throttle(callback,duration){        var lastTime = new Date().getTime();        return function(){     var now = new Date().getTime();          if(now-lastTime >duration){      callback();      lastTime = now;     }         }       }      window.onscroll = throttle(function(){    console.log("页面滚动了")   },500)

可以看到的是，当我们使用函数防抖或者节流处理之后，事件函数调用的频率大大降低了。