前端笔记 JS防抖(debounce)与节流(throttle)

@[防抖(debounce)与节流(throttle)]
#防抖(debounce)
触发高频事件后 n 秒内函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间

// 防抖函数
function debounce(fn, n) {
  let timer;
  return function () {
    let _this = this;
    let args = arguments;
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(function () {
      fn.apply(_this, args);
    }, n);
  };
}
// 使用
window.onresize = debounce(function () {
  console.log("resize");
}, 500);

节流(throttle)
高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行频率

// 方式1: 使用时间戳
function throttle1(fn, n) {
  let time = 0;
  return function () {
    let _this = this;
    let args = arguments;
    let now = Date.now();
    if (now - time > n) {
      fn.apply(_this, args);
      time = now;
    }
  };
}
// 方式2: 使用定时器
function thorttle2(fn, n) {
  let timer;
  return function () {
    let _this = this;
    let args = arguments;

    if (!timer) {
      timer = setTimeout(function () {
        timer = null;
        fn.apply(_this, args);
      }, n);
    }
  };
}