js防抖与节流

最新推荐文章于 2024-08-09 00:05:00 发布

‭小木i

最新推荐文章于 2024-08-09 00:05:00 发布

阅读量58

点赞数

本文链接：https://blog.csdn.net/qq_61429045/article/details/121534598

版权

函数防抖函数节流事件处理 JavaScript 性能优化

关键词由CSDN通过智能技术生成

函数防抖

函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。如下图，持续触发scroll事件时，并不执行handle函数，当1000毫秒内没有触发scroll事件时，才会延时触发scroll事件。

函数节流

函数节流（throttle）：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。节流通俗解释就比如我们水龙头放水，阀门一打开，水哗哗的往下流，秉着勤俭节约的优良传统美德，我们要把水龙头关小点，最好是如我们心意按照一定规律在某个时间间隔内一滴一滴的往下滴。如下图，持续触发scroll事件时，并不立即执行handle函数，每隔1000毫秒才会执行一次handle函数。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <body>
       <button type="button" id="btn1">按钮1</button>
       <button type="button" id="btn2">按钮2</button>
       <script type="text/javascript">
           var timer = null;//防抖
           var btn1 = document.querySelector("#btn1");
           btn1.onclick = function(){
               clearTimeout(timer);
           timer =   setTimeout(()=>{
                   console.log("防抖");
               },2000)
           }
       var btn2 = document.querySelector("#btn2");//节流
       var arr = true;
       btn2.onclick = function(){
           if(arr){
               arr = false;
               console.log("节流");
                   setTimeout(()=>{
                   arr = true;
               },4000)
           }
       }
       </script>
   </body>
</html>