防抖与节流

防抖与节流

防抖（Debounce）和节流（Throttle）都是用来控制某个函数在一定时间内触发次数，两者都是为了减少触发频率，以便提高性能以及避免资源浪费

节流是第一个说了算，后续都会被节流阀屏蔽掉，防抖是最后一个说了算，前面启用的都会被清除

1. 防抖函数

防抖就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间

<input type="text">
<script>
  // 防抖 事件触发 n 秒后执行一次, 如果在 n 秒内重复触发则重新计算函数执行时间
  function debounce(func, delay) {
     
    // 设置标识符
    let timer = null;
    return function () {
     
      // 判断定时器是否存在，清除定时器
      timer && clearTimeout(timer)
      // 重新调用setTimeout
      timer = setTimeout(() =>  {
     
        func.apply(this, arguments)
        timer = null;
      }, delay)
    }
  }
  let input = document.querySelector('input');
  let inputValue = debounce(inputChange, 1000)
  function inputChange(e) {
     
    console.log(e.target.