防抖和节流

防抖和节流都是用于控制函数执行频率的技术，可以避免一些不必要的操作，提升页面的性能。

防抖：在短时间内多次触发同一个事件时，只会执行最后一次操作。比如用户快速输入搜索关键词，我们需要在用户停止输入后再进行搜索操作，这就需要使用防抖。

防抖的实现方法是通过设置一个定时器，在规定时间内如果再次触发了该事件，则清除之前的计时器，并重新开始计时，直到规定时间内没有再次触发事件，才执行对应的操作。

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

节流：在一段时间内只执行一次操作。比如用户不断地滚动页面，我们可以设置一定时间间隔，每隔一段时间再执行一次处理滚动事件的函数，这就是节流。

节流的实现方法是记录上一次函数执行的时间戳，当当前时间戳与上一次的时间戳相差大于指定的时间间隔时，就执行对应的操作。

function throttle(fn, delay) {
  let timer = null;
  let lastTime = 0;
  return function() {
    const context = this;
    const args = arguments;
    const nowTime = new Date().getTime();
    if (nowTime - lastTime > delay) {
      clearTimeout(timer);
      lastTime = nowTime;
      fn.apply(context, args);
    } else {
      clearTimeout(timer);
      timer = setTimeout(function() {
        lastTime = nowTime;
        fn.apply(context, args);
      }, delay - (nowTime - lastTime));
    }
  }
}

防抖和节流都可以有效控制函数的执行频率，在实际开发中可以根据具体场景选择使用哪一种技术。

总结：防抖：单位时间内 频繁触发事件，只执行最后一次

            应用场景：搜索框搜索输入

            代码思路：利用定时器，每次触发先清空以前的定时器（从新开始）

            节流:单位时间内，频繁触发事件，只执行一次

            应用场景：高频事件 快速点击 鼠标滑动 resize事件 scroll事件

            代码思路：利用定时器 等定时器执行完毕 才开启定时器（不要打断）