JS 节流和防抖

decounce-and-throttle.png

1. 概念介绍

• debounce: 防抖函数，高频事件触发 在 n 秒内只会执行一次，节流会稀释函数的执行频率；
• debounce：节流函数，触发高频事件后 n 秒内函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间；
• 区别：防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行

2. debounce 防抖实现

3. throttle 节流实现

3.1 基于状态标记的实现

// 基于状态标记的实现
function throttle(func, timeout, firstCall) {
  let run = true;
  let timer = null;
  let called = false;
  function throttled() {
    if (!run) {
      return  // 如果开关关闭了，那就直接不执行下边的代码
    }
    run = false;
    if (firstCall && !called) {
      func.apply(this, arguments)
      called = true
      run = true
    } else {
      timer = setTimeout(() => {
        func.apply(this, arguments)
        run = true;
      }, timeout)
    }
  }

  throttled.cancel = function () {
    clearTimeout(timer);
    run = true;
  }

  return throttled
}

3.2 基于时间刻度的实现