JavaScript 中何为防抖和节流？如何实现？

防抖（Debouncing）和节流（Throttling）是用于控制 JavaScript 中频繁触发的事件处理函数执行频率的两种常用技术。

1. 防抖（Debouncing）：

   • 防抖是指在连续触发事件后，只有当一定时间间隔内没有新的触发事件时，才执行事件处理函数。如果在这个时间间隔内又有触发事件发生，则重新计时。
   • 适合用于减少事件处理函数的执行次数，比如输入框实时搜索，滚动加载等场景。

   实现方法：

   function debounce(func, delay) {
       let timeoutId;
       return function() {
           const context = this;
           const args = arguments;
           clearTimeout(timeoutId);
           timeoutId = setTimeout(() => {
               func.apply(context, args);
           }, delay);
       };
   }
   

2. 节流（Throttling）：

   • 节流是指在一定时间间隔内，只执行一次事件处理函数。无论事件触发频率多高，都会按照固定的时间间隔执行一次。
   • 适合用于限制事件处理函数的执行频率，比如滚动事件、窗口调整大小等场景。

   实现方法：

   function throttle(func, delay) {
       let throttled = false;
       return function() {
           const context = this;
           const args = arguments;
           if (!throttled) {
               throttled = true;
               setTimeout(() => {
                   func.apply(context, args);
                   throttled = false;
               }, delay);
           }
       };
   }
   

这两种技术可以根据具体需求选择合适的方式来控制事件处理函数的执行频率，以提高性能和用户体验。