前端 js 经典:节流和防抖

56 阅读1分钟

前言:防抖和节流都是为了阻止操作高频触发,从而浪费性能。

// 防抖 实例:搜索框、resize 浏览器窗口
// 高频触发只执行一次
function debounce(fn, wait) {
  let timer = null;
  return function () {
    timer && clearTimeout(timer);

    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, wait);
  };
}

// 节流 实例:按钮事件、滚动加载事件
// 高频触发每隔wait秒执行一次
function throttle(fn, wait) {
  let timer = null;
  return function () {
    if (!timer) {
      timer = setTimeout(() => {
        fn.apply(this, arguments);
        timer = null;
      }, wait);
    }
  };
}