JavaScript中的消除抖动是用于提高浏览器性能的一种做法。网页中可能存在一些功能, 这些功能需要耗时的计算。如果经常调用这种方法, 则可能会极大地影响浏览器的性能, 因为JavaScript是一种单线程语言。防弹跳是一种编程实践, 用于确保耗时的任务不会频繁触发, 从而使网页的性能停滞不前。换句话说, 它限制了函数被调用的速率。
<html>
<body>
<button id= "debounce" >
Debounce
</button>
<script>
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));
</script>
</body>
</html>输出如下：3秒后显示警报框
Hello
No matter how many times you click the debounce button, I get executed once every 3 seconds!!说明：
该按钮附加到事件监听器, 该监听器调用消除抖动功能。防抖功能提供2个参数-一个功能和一个数字。
声明了一个变量debounceTimer, 顾名思义, 该变量用于实际调用该函数, 在"延迟"毫秒的间隔后作为参数接收。
如果仅单击一次消除抖动按钮, 则在延迟后调用消除抖动功能。但是, 如果单击去抖按钮一次, 然后在延迟结束之前再次单击该按钮, 则将清除初始延迟并启动新的延迟计时器。使用clearTimeout函数来实现它。
消除抖动的一般想法是：
1.从0超时开始
2.如果再次调用去抖功能, 则将计时器重置为指定的延迟
3.如果超时, 请调用去抖动功能
因此, 每次调用去抖功能都会重置计时器并延迟呼叫。
应用：
可以在实现提示文字时应用消除抖动功能, 在这种情况下, 我们会在提示文字之前等待用户停止键入几秒钟。因此, 在每次击键时, 我们都需要等待几秒钟才能给出建议。
消除抖动的另一种应用是在内容加载的网页(如Facebook和Twitter)中, 用户不断滚动。在这些情况下, 如果滚动事件触发得太频繁, 则可能会影响性能, 因为它包含很多视频和图像。因此, 滚动事件必须使用消除抖动功能。
