07 函数节流与函数防抖

函数节流（throttle）与函数防抖（debounce）核心思想都是通过限制函数调用来实现性能优化，但两者概念却有不同：

• 函数节流：函数按指定间隔调用，限制函数调用频率

• 函数防抖：一定时间段连续的函数调用，只让其执行一次

两者的使用场景也有不同：

• 函数节流：页面滚动事件监听（scroll）、DOM 元素拖拽（mousemove）、键盘事件（keydown）

• 函数防抖：文本输入验证发送请求、窗口缩放（resize）

函数节流

函数节流可以通过设置两个时间戳来实现，通过比较两个时间戳，让其在一定时间间隔内只执行一次，然后将时间戳重置为这次执行的时间，实现代码如下：

function throttle(func, delay) {
  let lastCall = new Date()
  return function(...args) {
    const now = new Date()
    if (now - lastCall < delay) {
      return
    }
    lastCall = now
    return func.apply(this, args)
  }
}

loadsh.js 里的函数节流功能实现更为复杂，可以实现首调用和尾调用。这里不再细说，详情可以参考源码。

函数防抖

函数防抖可以通过定时器来实现，还可以设置第一次触发时是否立即执行：

function debounce(func, wait, immediate = false) {
  let timeout
  return function(...args) {
    clearTimeout(timeout)
    timeout = setTimeout(() => {
      func.apply(this, args)
    }, wait)
    // 是否立即执行一次任务
    if (immediate) {
      immediate = false
      func.apply(this, args)
    }
  }
}