函数节流与函数防抖

防抖：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间
节流：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率

html

<body>
  <button id="debounce">防抖</button>
  <button id="throttle">节流</button>
  <script src="./index.js"></script>
</body>

// 高频率执行函数
function highFrequency(text) {
  console.log(text);
}

// 防抖
document.querySelector("#debounce").onclick = debounce(highFrequency, "函数防抖");
// 对高频率执行函数进行防抖处理
function debounce(fn, ...args) {
  let clock = null;
  return function() {
    if (clock) {
      clearTimeout(clock);
    }
    clock = setTimeout(function() {
      fn(...args);
    }, 1000);
  };
}

// 节流
document.querySelector("#throttle").onclick = throttle(highFrequency, "函数节流");
// 对高频率执行函数进行节流处理
function throttle(fn, ...args) {
  let canRun = true;
  return function() {
    if (!canRun) {
      return;
    }
    canRun = false;
    setTimeout(function() {
      fn(...args);
      canRun = true;
    }, 1000);
  };
}

函数节流与函数防抖

推荐阅读更多精彩内容