防抖和节流

小六*^____^*

已于 2023-05-16 16:09:22 修改

阅读量83

点赞数

文章标签： javascript 前端 vue.js

于 2023-05-13 18:36:51 首次发布

本文链接：https://blog.csdn.net/weixin_43641912/article/details/130660776

版权

文章介绍了JavaScript中用于优化频繁触发事件处理的两种技术——防抖(debounce)和节流(throttle)函数。防抖函数通过限制函数的执行频率，确保在特定时间内只执行最后一次调用，而节流函数则保证在一定间隔内固定执行次数。文中提供了防抖和节流函数的实现代码示例，并通过输入事件和点击事件展示了它们的应用。

摘要由CSDN通过智能技术生成

防抖函数

防抖函数的原理：把触发非常频繁的事件合并成一次去执行，在指定时间内值执行一次回调函数，如果在指定时间内又触发了一次事件，则回调函数的执行事件会在此刻重新开始计时，防抖是将多次执行变为最后一次执行，也就是说在N秒内（规定的时间内），只要你再次触发，计时器就会重新开始计时

/*
*callback，事件处理函数
*immediate 第一次是否执行，第一次触发的时候就要执行一次事件处理函数，通过timer是否为null判定，
*如果timer为null说明之前没有设置计时器，或者计时器完全清除
*delay 延时时间
**/
function debounce(callback, immediate, delay){
  let timer = null;
  return function(){
    //如果是箭头函数可以不保存this
    let _this = this,
        args = arguments;
    if(immediate){
      let isExecutor = !timer;
      if(isExecutor){
           timer = setTimeout(function(){
        		callback && callback.apply(_this, args);
             timer = null;
      		}, 0)
      } else {
        timer = setTimeout(function(){
          callback && callback.apply(_this, args);
          timer = null;
      	}, delay)
      
    } else{
      timer = setTimeout(function(){
        callback && callback.apply(_this, args);
        timer = null;
      }, delay)
    
  }
  
	}
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <input id="inp" type="text"/>
  <script>
   let oIn = document.getElementById('inp');
   oIn.addEventListener('input', function(e){
     debounce(handleClick, false,3000)(e,'string');
   }, false);
   // 当事件执行的时候将会触发执行。
   function handleClick(e, str){
     var e = e || window.event,
         tar = e.target || e.srcElement;
     console.log(tar.value, str);
   }
   function debounce(callback, immediate, delay){
    let timer = null;
    return function(){
      var _this = this,
          args = arguments;
      if(timer){
        clearTimeout(timer);
      }
      //首次触发执行，再次触发以后开始执行防抖函数
      if(immediate){
        var isFirst = !timer;
        if(isFirst){
          timer = setTimeout(function(){
            callback && callback.apply(_this,args);
            timer = null;
          },0)
        } else{
          timer = setTimeout(() =>{
            callback && callback.apply(_this,args);
            timer = null;
          },delay)
        }
      
      } else {
       timer = setTimeout(function(){
          callback && callback.apply(_this,args);
          timer = null;
        },delay)
      }
    }
   }
  
  </script>

</body>
</html>

节流函数

throttle节流：在指定的时间内，只会执行规定的次数，例如，规定一秒内只执行两次，但是一秒内点击了10次，节流的话就是说即使点击了10次也只会执行两次。
节流函数一般都是设置n秒内只能执行一次

   function throttle(callback, delay){
      let startTime = new Date();
      let timer = null;
      return function(){
        var _this = this,
            args = arguments,
            endTime = new Date(),
            distance = endTime - startTime;
        if(timer){
          clearTimeout(timer);
        }
        if(distance >= delay){
          callback && callback.apply(_this, args);
        } else {
          timer = setTimeout(function(){
            callback && callback.apply(_this, args);
          }, delay)
        }
        
      }
    }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      div{
        width: 400px;
        height: 400px;
        background-color: #bbaaff;
      }
    </style>
  </head>
  <body>
    <div>
    </div>
    <script>
      var oDiv = document.getElementsByTagName('div')[0];
      oDiv.addEventListener('click', throttle(handleClick, 2000), false);
      function handleClick(e){
        console.log(111);
      }
      function throttle(callback, delay){
        let startTime = new Date();
        let timer = null;
        return function(){
          var _this = this,
            args = arguments,
            endTime = new Date(),
            distance = endTime - startTime;
          if(timer){
            clearTimeout(timer);
          }
          if(distance >= delay){
            callback && callback.apply(_this, args);
          } else {
            timer = setTimeout(function(){
              callback && callback.apply(_this, args);
            }, delay)
          }

        }
      }
    </script>
  </body>
</html>