JavaScript 中的去抖动

JavaScript 中的去抖动是一种用于提高浏览器性能的实践。网页中可能有一些需要耗时计算的功能。如果频繁调用这样的方法，可能会极大地影响浏览器的性能，因为 JavaScript 是单线程语言。去抖动是一种编程实践，用于确保耗时的任务不会频繁触发，从而导致网页性能停滞。换句话说，它限制了函数被调用的速率。

 


    Debounce


var button = document.getElementById("debounce");
const debounce = (func, delay) => {
    let debounceTimer
    return function() {
        const context = this
        const args = arguments
            clearTimeout(debounceTimer)
                debounceTimer
            = setTimeout(() => func.apply(context, args), delay)
    }
} 
button.addEventListener('click', debounce(function() {
        alert("Hello\nNo matter how many times you" +
            "click the debounce button, I get " +
            "executed once every 3 seconds!!")
                        }, 3000));

输出： 3 秒后的警报框

Hello
No matter how many times you click the debounce button,
I get executed once every 3 seconds!!

解释：

该按钮附加到调用 debounce函数的事件侦听器。 debounce函数提供了 2 个参数——一个函数和一个数字。
声明了一个变量 debounceTimer，顾名思义，用于实际调用函数，在间隔 'delay' 毫秒后作为参数接收。
如果 debounce 按钮只被点击一次，debounce函数会在延迟后被调用。但是，如果单击一次去抖动按钮，并在延迟结束之前再次单击，则初始延迟将被清除并启动新的延迟计时器。 clearTimeout函数被用来实现它。

去抖动的一般思路是：
1.从0超时开始
2.如果再次调用debounced函数，将定时器重置为指定延迟
3.如果超时，调用去抖函数
因此，每次调用 debounce函数都会重置计时器并延迟调用。

应用：
去抖可以应用于实现提示文本，我们在提示文本之前等待用户停止输入几秒钟。因此，在每次击键时，我们都会等待几秒钟，然后再给出建议。
去抖动的另一个应用是在用户不断滚动的 Facebook 和 Twitter 等内容加载网页中。在这些情况下，如果滚动事件被触发得太频繁，可能会影响性能，因为它包含大量视频和图像。因此滚动事件必须使用去抖动。

JavaScript 以网页开发而闻名，但它也用于各种非浏览器环境。您可以按照这个 JavaScript 教程和 JavaScript 示例从头开始学习 JavaScript。