防抖和节流

防抖:

是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次
在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时

防抖应用场景：

1. search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
2. window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

// 函数防抖
const debounce = (fn, delay) => {
  let timer = null

  return (...args) => {
    clearTimeout(timer)
    timer = setTimeout(() => {
      fn.apply(this, args)
    }, delay)
  }
}

节流:

规定一个单位时间内，只触发一次函数

节流应用场景：

1. 鼠标不断点击触发，mousedown(单位时间内只触发一次)
2. 监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断

// 函数节流
const throttle = (fn, delay = 500) => {
  let flag = true

  return (...args) => {
    if (!flag) return
    flag = false
    setTimeout(() => {
      fn.apply(this, args)
      flag = true
    }, delay)
  }
}

document.body.addEventListener('scroll', throttle(foo, 2000));

原文参照：https://juejin.im/entry/5b1d2d54f265da6e2545bfa4