防抖与节流详解

认识防抖和节流

​ 在开发过程中，我们经常会需要绑定一些持续性触发的事件，如scroll，resize，mousemove等等，但有些时候我们并不希望在事件持续触发过程中那么频繁地去执行相应的事件函数，这样太浪费性能。所以通过防抖和节流来限制事件频繁发生。

​ 就像以下这样，当输入框里的文字发生任何变化都会发送一遍请求，所以会在很短的时间那发送数量庞大的请求。所以这个时候就需要防抖和节流了

防抖（dabounce）

防抖的定义：

指触发事件后在n秒内函数只执行一次，如果n秒内又触发了这个事件，则会重新计算函数执行时间。

也就是说只有在某个时间段内，没有再次触发某个函数时，才真正调用这个函数。

####防抖的过程：

• 当事件触发时，相应的函数并不会立即被触发，而是会等待一定的时间；

• 当事件密集触发时，函数的触发会被频繁的推迟；

• 只有等待了一段时间也没有事件触发，才会真正的执行响应函数

防抖本质上就是以最后的操作为标准

有个有意思的比方是：此时此刻我们都在排队等公交，司机说必须等到坐满才会发车，这时候的参照标准就是最后一个人上车，公交车好比我们的js代码，最后一个人就充当我们的执行条件。

防抖的代码实现：

我们可以用setTimeout来实现防抖，代码如下：

//用定时器实现防抖
function debounce(fn, wait) {
    let timout = null;
    return function () {
        clearTimeout(timout)
        timout = setTimeout(fn, wait)
    }
}

防抖的应用场景

• 输入框中频繁的输入内容，搜索或者提交信息；
• 频繁的点击按钮，触发某个事件
• 监听浏览器滚动事件，完成某些特定操作；
• 用户缩放浏览器的resize事件；

防抖总结

总之，密集的事件触发，我们只希望触发比较靠后发生的事件，就可以使用防抖函数；

节流（throttle）

节流的定义

在某个时间段内（比如500ms），某个函数只能被触发一次；

就是指连续触发某个事件，但是在n秒内只执行一次

节流的代码实现

我们可以用时间戳或者是定时器来实现节流

第一种：定时器

//定时器实现节流
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)
        }
    }
}

第二种：时间戳

//时间戳实现节流
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;
        }

    }

节流的应用场景

• 鼠标移动事件；

• 用户频繁点击按钮操作；

• 游戏中的一些设计；比如：在飞机大战的游戏中，我们按下空格会发射一个子弹：很多飞机大战的游戏中会有这样的设定，即使按下的频率非常快，子弹也会保持一定的频率来发射；（其实很多的街机游戏都是这样的，普通攻击有一个最高的频率）；

  比如1秒钟只能发射一次，即使用户在这1秒钟按下了10次，子弹会保持发射一颗的频率来发射；

  但是事件是触发了10次的，响应的函数只触发了一次；

节流总结

总之，依然是密集的事件触发，但是这次密集事件触发的过程，不会等待最后一次才进行函数调用，而是会按照一定的频率进行调用；
应用场景

• 鼠标移动事件；

• 用户频繁点击按钮操作；

• 游戏中的一些设计；比如：在飞机大战的游戏中，我们按下空格会发射一个子弹：很多飞机大战的游戏中会有这样的设定，即使按下的频率非常快，子弹也会保持一定的频率来发射；（其实很多的街机游戏都是这样的，普通攻击有一个最高的频率）；

  比如1秒钟只能发射一次，即使用户在这1秒钟按下了10次，子弹会保持发射一颗的频率来发射；

  但是事件是触发了10次的，响应的函数只触发了一次；

节流总结

总之，依然是密集的事件触发，但是这次密集事件触发的过程，不会等待最后一次才进行函数调用，而是会按照一定的频率进行调用；