如何在JavaScript中实现消除抖动?代码实现示例

2021年3月12日13:25:23 发表评论 676 次浏览

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)中, 用户不断滚动。在这些情况下, 如果滚动事件触发得太频繁, 则可能会影响性能, 因为它包含很多视频和图像。因此, 滚动事件必须使用消除抖动功能。


木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: