JavaScript中的去抖动-yiteyi-C++库

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

null

                     <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(                               "HelloNo 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!!

说明：

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

去抖动的总体思路是： 1.从0开始超时 2.如果再次调用去抖动功能，则将计时器重置为指定的延迟 3.如果超时，调用取消公告功能因此，每次调用解盎司函数时，都会重置计时器并延迟调用。

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

JavaScript最为人所知的是网页开发，但它也用于各种非浏览器环境。通过以下步骤，您可以从头开始学习JavaScript JavaScript教程和 JavaScript示例 .

文章版权归作者所有，未经允许请勿转载。

THE END

Javascript