JS防抖和节流

防抖

什么是防抖

JS防抖（Debounce）是一种常用的前端开发技术用于对频繁触发的事件进行优化处理。当一个事件被触发时，防抖技术会延迟执行该事件处理函数，并且如果在延迟期间内该事件再次被触发，延迟期会被重新计算，只有当事件停止触发一定时间后，才会执行事件处理函数。

防抖的主要目的是减少频繁触发事件时的不必要的重复操作，提升页面性能和用户体验。常见的应用场景包括搜索框输入联想、按钮点击、窗口大小改变等需要进行网络请求或者计算的操作。

如何实现防抖

实现防抖的方法是通过定时器函数setTimeout和事件监听器结合来实现。在事件触发时，清除已存在的定时器并重新设置一个新的定时器，等待一定的延迟时间后再执行事件处理函数。如果在延迟时间内事件再次触发，则重复上述操作，直到事件停止触发。

// 防抖: 设置延时器，短时间高频率触发只有最后一次触发成功
      var timer = null;
      btn.onclick = function() {
          // 清除已存在的定时器并重新设置一个新的定时器
          clearTimeout(timer);
          timer= setTimeout(() => {
            // 等待一定的延迟时间后再执行事件处理函数
              console.log('点击了');
          }, 1000);
      }

节流

什么是节流

JS节流（Throttle）也是一种常用的前端开发技术，用于控制事件的触发频率。与防抖技术类似，节流也是为了优化频繁触发的事件，但不同之处在于节流会按照一定的时间间隔执行事件处理函数，而不是等待事件停止触发。

如何实现节流

实现节流的方法也是通过定时器函数setTimeout和事件监听器结合来实现。当事件触发时，先判断是否存在一个定时器。如果不存在，则立即执行事件处理函数，并设置一个新的定时器，延迟一定时间后清除定时器；如果存在定时器，则不执行事件处理函数。只有在定时器延迟时间到达后，才会再次执行事件处理函数

以下是一个简单的示例，展示了如何使用JS实现节流：

      // 节流: 设置状态锁，短时间高频率触发只有第一次触发成功
      var key = false;
      btn.onclick = function () {
        // 先判断是否存在一个定时器
        if (!key) {
          console.log("点击了");
          key = true;
          setTimeout(function () {
            key = false;
          }, 1000);
        }
      };