防抖与节流

防抖

原理：
当事件被触发 n 秒后再执行回调，如果在 n 秒内又被触发，则重新计时。

使用场景：
频繁触发按钮点击事件、input框搜索等等。
一个搜索输入框， 用户不停的进行输入（这个时候就是抖动的过程）， 等用户输入停止之后，再触发搜索

// 防抖（一定时间内触发多次，会取消中间的多次触发，只执行最后一次触发）
export const debounce = (func, wait) => {
  let delay = wait || 500;
  let timer;
  return () => {
    const _this = this;
    let args = arguments;

    // 防抖与节流关键代码行
    if (timer) {
      clearTimeout(timer)
    }

    timer = setTimeout(() => {
      func.apply(_this, args)
      timer = null
    }, delay)
  }
}

节流

原理：
规定在一个单位时间内只能触发一次函数，如果在单位时间内触发多次,只执行一次。比如两秒内的点击事件，无论点多少次，两秒内只执行一次。

使用场景：
下拉加载更多（无限滚动）事件、浏览器的resize，scroll事件等等

// 节流（单位时间内执行一次。时间内触发多次，只执行一次。即每隔一段时间执行一次）
export const throttle = (func, wait) => {
  let delay = wait || 500;
  let timer;
  return () => {
    const _this = this;
    let args = arguments;

    // 节流与防抖关键代码行
    if (timer) {
      return
    }

    timer = setTimeout(() => {
      func.apply(_this, args)
      timer = null
    }, delay)
  }
}