如何区分 节流 和防抖

问：如何区分 防抖和节流
答：在 JavaScript 中，防抖和节流是处理高频触发事件的两种常用的技术，它们都有助于提高性能和避免代码中的一些问题。它们的本质区别在于处理函数被调用的方式：

• 防抖：将几次操作合并为一次操作进行处理，即等到最后一次操作完成一定时间后再执行对应的函数。
• 节流：将几次操作合并为一定时间内的一个操作，即在一定时间内只执行一次对应的函数。

具体来说：

1. 防抖(debounce)：
   当函数需要在一定时间内连续地被频繁地调用时，它会重新启动等待计时器，直到一段时间内没有新的调用产生。例如，在用户输入搜索关键字之前等待一段时间，以使输入结果不会过于频繁地更新。防抖的本质是保证在执行某个函数之前，间隔一段时间内没有再次触发事件。

例如：

 function debounce(func, delay) {
   let timer;
   return function() {
     const context = this;
     const args = arguments;
     clearTimeout(timer);   // 不管闭包函数执行多少次，先把之前的定时器全部清了，每次都清，就能保证在一定时间范围内快速点击的时候，只有最后一个定时器是有效的
     timer = setTimeout(() => {
       func.apply(context, args);
     }, delay);
   };
 }

2. 节流(throttle):
   当函数需要在一定的时间段内被频繁的调用时，只执行一次对应的函数，以减轻服务器压力。例如，用户在界面滚动时，只有拖动结束并停顿一段时间后，才显示大量的数据，以避免计算机的崩溃。本质上，即确保在一段时间内只执行一次相关函数。

例如：

 function throttle(func, delay) {
   let previous = 0;
   return function() {
     const now = Date.now();
     const context = this;
     const args = arguments;
     if (now - previous > delay) {
       func.apply(context, args);
       previous = now;
     }
   };
 }

定时器写法，注意此写法跟防抖有点类似，但能达到节流效果

const throttle2 = (fn, delay) => {
    let timer = null;
    return () => {
      const context = this;
      if (!timer) {
        timer = setTimeout(() => {
          fn.apply(context, arguments);
          timer = null  // 同上面的时间搓一样，赋值初始化
        }, delay)
      }
    }
  }

综上，防抖和节流都可以优化高频触发导致的性能问题，但防抖和节流解决问题的方式略有不同。可以根据具体的场景和需求，选择相应的技术。

1.防抖(debounce)：
防抖触发高频率事件时n秒后只会执行一次，如果n秒内再次触发，则会重新计算。
简单概括：每次触发时都会取消之前的延时调用。

2.节流(thorttle):
高频事件触发，每次触发事件时设置一个延迟调用方法，并且取消之前延时
调用的方法。
简单概括：每次触发事件时都会判断是否等待执行的延时函数。

区别：降低回调执行频率，节省计算资源。
防抖和节流本质是不一样的。防抖是将多次执行变为最后一次执行，节流是将
多次执行变成每隔一段事件执行
函数防抖一定连续触发的事件，只在最后执行一次，而函数节流一段时间内只执行
一次。

注意：他们都是闭包函数，注意其运用场景，比如在react中需要使用useMemo或 useCallBack来确保防抖或节流母函数只被执行一次，不然会没效果

从执行效果来看，防抖是不管你点击多少次，以最后一次点击为主
节流是，只要满足规定时间间隔内，都可以触发，从执行次数来看，肯定防抖执行得更少，节流更加匀速执行。（在相同时间范围内疯狂去触发的情况下）