实现防抖函数（debounce）

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

手写简化版

const debounce =  function(fn, delay) {
  let timer = null
  return function (...args) {
    clearTimeout(timer)
    timer = setTimeout(function() {
      fn.apply(this, args)
    }, delay)
  }
}

适用场景

按钮提交场景：防止多次提交按钮，只执行最后一次。（当然也可以用loading去做防止重复点击）
服务端验证场景：表单验证需要服务端配合，只执行一次连续的输入时间的最后一次，还有搜索联想词功能类似。

生产环境请用loadsh.debounce

实现节流函数（throttle）

防抖函数原理：规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

手写简化版

const throttle = (fn) => (delay = 500) => {
  let timer = null
  return (...args) => {
    if (timer) return
    timer = setTimeout(() => {
      fn.apply(this, args)
      clearTimeout(timer)
    }, delay);
  }
}

适用场景

拖拽场景：固定时间内只执行一次，防止超高频次触发位置变动
缩放场景：监控浏览器resize
动画场景：避免短时间内多次触发动画引起性能问题

防抖和节流

实现防抖函数（debounce）

实现节流函数（throttle）