Vue最新防抖方案

痛定思痛。 2021-08-14 02:04 271阅读 0赞

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

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

**防抖实例：**

**节流实例：**

--------------------

更新

// 防抖:多次触发事件后，事件处理函数只执行一次，并且是在触发操作结束时执行。
    export function debounce(fn, delay) { 
      var delay = delay || 200;
      var timer;
      return function () { 
        var th = this;
        var args = arguments;
        if (timer) { 
          clearTimeout(timer);
        }
        timer = setTimeout(function () { 
          timer = null;
          fn.apply(th, args);
        }, delay);
      };
    }
    // 节流:触发函数事件后，短时间间隔内无法连续调用，只有上一次函数执行后，过了规定的时间间隔，才能进行下一次的函数调用。
    export function throttle(fn, interval) { 
      var last;
      var timer;
      var interval = interval || 200;
      return function () { 
        var th = this;
        var args = arguments;
        var now = +new Date();
        if (last && now - last < interval) { 
          clearTimeout(timer);
          timer = setTimeout(function () { 
            last = now;
            fn.apply(th, args);
          }, interval);
        } else { 
          last = now;
          fn.apply(th, args);
        }
      };
    }