节流和防抖区别和实现

Posted 2020-11-23 xhappyness

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了节流和防抖区别和实现相关的知识，希望对你有一定的参考价值。

节流

实现：

/**
 * 函数节流：开始会执行一次，持续触发事件的话，每隔wait时间执行一次；
 * 应用场景mousemove, scroll等会连续执行的事件，比较适合应用于动画相关的场景。
 * @param fn 需要节流的函数
 * @param wait 间隔时间
 */
export function throttle(fn, wait = 1000) {
    let lastTime = 0; //上次执行的时间
    return function (...args) {
        let now = +new Date();
        if (now - lastTime > wait) {
            lastTime = now;
            fn.apply(this, args);
        }
    }
}

使用：

  mounted() {
    // 触发resize的时候会先执行一次，如果下次触发resize和上次触发resize时间大于wait（不论中间有没有持续触发resize），那么会再次执行函数
    window.addEventListener(
      "resize",
      (this._resize = throttle(()=>{console.log("视口改变")}, 5000))
    );
  },
  destroyed() {
    window.removeEventListener("resize", this._resize);
  }

防抖

实现：

/**
 * 函数防抖：触发事件的wait 时间后才执行; 如果wait 时间内事件持续被触发，则以新触发的时间为标准，然后wait 时间后再执行；
（不持续触发，wait 时间后执行一次；如果持续触发，以最后触发为准，也wait 时间后只执行一次）
 * 应用场景： 输入验证，提交按钮点击事件
 * @param fn 需要防抖的函数
 * @param wait 等待时间
 */

function debounce(fn, wait = 1000) {
    let timer = undefined; //定时器id
    return function (...args) {
        if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(this, args);
        }, wait);
    }
}