JavaScript 中的节流与防抖

什么是节流和防抖

节流和防抖的本质都是用闭包的形式，通过对事件对应的回调函数进行包裹，用自由变量缓存时间信息，最后用 setTimeout 来控制事件的触发频率。

• 节流 throttle

  节流是指在一定的时间内，不管触发多少次回调函数，都只执行一次。

• 防抖 debounce

  防抖是指在一定时间内，如果再次调用回调函数，则开始新的计时，不管调用了多少次，只触发最后一次。

具体实现

• throttle

  var throttle = function(func, delay) {
      // 内存中定义变量保存信息（闭包）
      var timer = null;
      
      // 返回的这个函数就是频繁执行的函数，在其内部进行节流操作
      return function() {
          var context = this;
          var args = arguments;
          // 节流逻辑——规定时间内不会执行被节流的函数，每当timer为null之后才会执行一次。
          if (!timer) {
              timer = setTimeout(function() {
                  func.apply(context, args);
                  timer = null;
              }, delay);
          }
      }
  }
  // 被节流的处理函数
  function handle() {
      console.log(Math.random());
  }
  // 频繁执行的函数(用滚动事件举例)
  window.addEventListener('scroll', throttle(handle, 1000));
  

• debounce

  // 防抖
  function debounce(fn, wait) {    
      var timeout = null;    
      return function() {        
          if(timeout !== null)   clearTimeout(timeout);        
          timeout = setTimeout(fn, wait);    
      }
  }
  // 被防抖的处理函数
  function handle() {    
      console.log(Math.random()); 
  }
  // 频繁执行的函数(用滚动事件举例)
  window.addEventListener('scroll', debounce(handle, 1000));