JavaScript防抖与节流

JavaScript防抖与节流

• 1 为什么需要防抖和节流
• 2 防抖与节流原理
• 3 实现一个防抖函数
• • 3.1 初步实现
  • 3.2 this问题
  • 3.3 event问题
  • 3.4 立即执行
  • 3.5 返回值问题
  • 3.6 取消防抖
  • 3.7 总结
• 4 实现节流函数
• • 4.1 通过时间戳实现节流
  • 4.2 使用定时器实现节流
  • 4.3 时间戳和定时器组合实现
  • 4.4 节流优化
• 5 应用场景

1 为什么需要防抖和节流

在前端开发当中，有些交互事件，会被频繁触发，这样会导致我们的页面渲染性能下降，如果频繁触发接口调用的话，会直接导致服务器性能的浪费。

举个例子，在下面的代码中，我们定义了一个输入框，输入一段文字，测试键盘的keyup（键盘弹起）事件触发了多少次，通过该实例来演示事件是如何被频繁触发的。

    <input type="text" id="demo">
    <div>触发了：<span id="count">0</span>次</div>
    <script>
        // 获取input输入框与span标签
        let demo = document.getElementById("demo");
        let count = document.getElementById("count");

        // 为demo输入框注册keyup事件
        let init = 0; // 记录keyup事件被触发的次数
        demo.onkeyup = function () {
            // 将span标签中的文本修改为事件被触发的次数
            count.innerHTML = ++init;
        }
    </script>

从上面的演示可以看到，我在输入框中输入了5个字，但是keyup事件会被触发30次。如果我们使用这样的方式去检测用户输入的用户名是否可用，这样高频率的触发不仅是对性能极大的浪费，而且用户还没有输入完就开始检测，对用户来说提示并不友好。在这样的情况下，我们就可以等用户输入完成之后，再去触发函数，这样的优化就使用到了防抖与节流。

2 防抖与节流原理

函数防抖：在事件触发后的 n 秒之后，再去执行真正需要执行的函数，如果在这 n 秒之内事件又被触发，则重新开始计时。 也就是说，如果用户在间隔时间内一直触发函数，那么这个防抖函数内部的真正需要执行的函数将永远无法执行。

那么根据防抖的原理，我们可以尝试想象一下上面的例子的改进措施，如果为keyup事件添加防抖函数，那么只有当keyup在一段时间内不再被触发，函数才会执行，也就说才开始计数。

函数节流：规定好一个单位时间，触发函数一次。如果在这个单位时间内触发多次函数的话，只有一次是可被执行的。想执行多次的话，只能等到下一个周期里。

如果为keyup事件添加节流函数，那么效果就是，在一段时间内，会计数一次，然后在下一段时间内，再计数一次。

在了解防抖函数和节流函数的原理之后，接下来我们可以尝试自己写一个防抖与节流的函数，看看是否能达到我们预想的效果。

3 实现一个防抖函数

3.1 初步实现

根据之前的描述，在事件被触发一段时间之后，函数才会执行一次，那么防抖函数中我们应该为其传入两个参数：被执行的函数fun和这段时间time。

// fun：被执行的函数
// time：间隔的时间
function debounce(fun, time) { }

对于防抖函数来说，它的返回值应该是一个函数，因为事件触发时接收一个函数。在该函数内部，要设计一个定时器，让在time时间后触发函数fun。

function debounce(fun, time) {
    return function () {
        // time时间后触发函数fun
        setTimeout(fun, time);
    }
}

但是上面的函数有一个问题，就是事件再次被触发时，会出现time时间后再执行一次函数fun，不能达到事件触发完成time时间后再执行函数的效果，也就是说，事件会被延时触发，并不能减少触发，这是因为定时器效果进行了累加，因此我们需要取消之前的定时器，以新的定时器为准。

function debounce(fun, time) {
    let timer;
    return function () {
        // 取消当前的定时器效果
        clearTimeout(timer);
        // time时间后触发函数fun
        timer = setTimeout(fun, time);
    }
}

到这里一个初步的防抖函数就完成了，接下来使用该函数改进之前的例子，具体代码如下：

    <input type="text" id="demo">
    <div>触发了：<span id="count">0</span>次</div>
    <script>
        // 获取input输入框与span标签
        let demo = document.getElementById("demo");
        let count = document.getElementById("count");

        // 防抖函数
        function debounce(fun, time) {
            let timer;
            return function () {
                // 取消当前的定时器效果
                clearTimeout(timer);
                // time时间后触发函数fun
                timer = setTimeout(fun, time);
            }
        }

        // 为demo输入框注册keyup事件
        let init = 0; // 记录keyup事件被触发的次数
        demo.onkeyup = debounce(function () {
            // 将span标签中的文本修改为事件被触发的次数
            count.innerHTML = ++init;
        }, 1000);
    </script>

3.2 this问题

从上面的效果图来看，我输入5个字后，1秒后keyup事件就触发了1次，对比之前的30次，大大减少了事件的触发频率。但是添加防抖之后，原本函数的this指向发生了改变。原本函数的this指向了触发事件的那个对象，但是添加防抖后this指向了window。

// 添加防抖之前打印 this
demo.onkeyup = function () {
    console.log(this); // <input type="text" id="demo"></input>
}

// 添加防抖之后打印 this
demo.onkeyup = debounce(function () {
    console.log(this);
}, 1000);

因此在防抖函数中，我们需要重新把this指回触发事件的对象上。那防抖函数中返回的函数this指向了谁呢，我们可以打印一下：

        funct