什么是防抖和节流？有什么区别？如何实现？—— 总结

有这样一种应用场景，在滚动事件中做一个复杂取值计算或者频繁的触发一个事件，这是很影响性能并容易导致页面卡顿的，所以要合并多次请求，通过函数做一个精确操作。这时就会用到函数防抖或者函数节流，那么，这两种方式有什么区别呢？

一、什么是防抖与节流？

防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。

节流（throttle）：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。节流通俗解释就比如我们水龙头放水，阀门一打开，水哗哗的往下流，秉着勤俭节约的优良传统美德，我们要把水龙头关小点，最好是如我们心意按照一定规律在某个时间间隔内一滴一滴的往下滴。

个人认为：

函数节流是：在固定的时间内触发事件，每隔n秒触发一次。
函数防抖是：当你频繁触发后，n秒内只执行一次。

二、区别

函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。

三、实现

1、防抖（类似于 电梯 屏保 类的）

​ 在固定时间内没有触发事件会在固定时间结束后触发，如果在固定时间内触发了就会延长固定时间

​ 防抖主要利用定时器实现

//用定时器实现防抖
function debounce(func,wait) {
    var timer=null;
    return function() {
    //保存当前调用的dom对象
     var _this=this;
     //保存事件对象
     var args=arguments;
     clearTimeout(timer)
     timer=setTimeout(function() {
         func.apply(_this,args)
     },wait)
    }

}

2、节流

无论在固定时间内是否有事件触发，都会按照固定时间规律触发

节流的实现方法有两种：

第一种：时间戳

//时间戳版本实现节流
function throttle(func,wait) {
    //定义初始时间
    var oldTime=0;

    return function() {
        var _this=this;
        var args=arguments;

        //当前时间戳
        var newTime=+new Date();

        //判断用当前时间减去旧的时间，如果大于wait指定的时间就会触发
        if(newTime-oldTime>wait) {
            //执行触发的函数
            func.apply(_this,args)
            //将旧时间更新
            oldTime=newTime;
        }

    }

第二种：定时器

//时间戳版本实现节流
function throttle(func,wait) {
    var timer=null;

    return function() {
        var _this=this;
        var args=arguments;
       if(!timer) {
            timer=setTimeout(function() {
                timer=null;
                func.apply(_this,args)
            },wait)
       }
    }
}

四、应用场景：

• debounce
  • search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
  • 频繁操作点赞和取消点赞，因此需要获取最后一次操作结果并发送给服务器
• throttle
  • 鼠标不断点击触发，mousedown(单位时间内只触发一次)
  • window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次