防抖和节流

为什么要防抖

有的操作是高频触发的，但是其实触发一次就好了，比如我们短时间内多次缩放页面，那么我们不应该每次缩放都去执行操作，应该只做一次就好。再比如说监听输入框的输入，不应该每次都去触发监听，应该是用户完成一段输入后在进行触发。

需要防抖的主要原因有以下几点：

1. 限制函数的触发频率：当某个函数被频繁触发时，可以使用防抖来降低函数的调用频率，以避免过多的计算或网络请求。
2. 优化用户体验：例如在用户进行输入、滚动窗口、拖拽等交互操作时，防抖可以确保最终只触发一次处理函数，避免频繁更新界面。

 

 代码演示

function debounce(func, delay) {
  let timer;
  
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, arguments);
    }, delay);
  };
}
 
// 示例使用
const searchInput = document.getElementById('searchInput');
 
function search() {
  // 处理搜索逻辑
}
 
const debounceSearch = debounce(search, 500);
searchInput.addEventListener('input', debounceSearch);

在上述代码中，debounce函数接受一个函数func和延迟时间delay作为参数，返回一个新的函数。这个新函数在被调用时会先清除之前的定时器，然后再设置一个新的定时器来延迟调用原始函数func。这样，当被防抖的事件频繁触发时，只有最后一次触发的事件会真正执行处理函数search，在前面的事件触发而未执行时，定时器会被不断清除和重设，以保证函数的调用频率符合预期。

节流怎么做

防抖存在一个问题，事件会一直等到用户完成操作后一段时间在操作，如果一直操作，会一直不触发。比如说是一个按钮，点击就发送请求，如果一直点，那么请求就会一直发布出去。这里正确的思路应该是第一次点击就发送，然后上一个请求回来后，才能再发。

节流就是减少流量，将频繁触发的事件减少，并每隔一段时间执行。即，控制事件触发的频率

**总结：**某个操作希望上一次的完成后再进行下一次，或者希望隔一段时间触发一次。

 代码演示

let timer, flag;
/**
*节流原理：在一定时间内，只能触发一次
*@param {Function} func 要执行的回调函数
*@param {Number} wait 延时时间
*@param {Boolean} immediate 是否立即执行
*@return null
*/
function throttle(func, wait = 500, immediate = true){
    if(immediate){
        if(!flag){
            flag=true;
            //如果是立即执行，则在wait毫秒内开始时执行
            typeof func === 'function' && func();
            timer = setTImeout(() => {
                flag = false;
            },wait);
        }
    }else{
        if(!flag){
            flag = true;
            //如果是非立即执行，则在wait毫秒内的结束处执行
            timer = setTimeout(() => {
                flag = false
                typeof func === 'function' && func();
            },wait);
        }
    }
}

节流：

1. 鼠标不断点击触发，mousedown(单位时间内只触发一次)
2. 监听滚动事件，比如是否滑到底部自动加载更多

 如何选择

选择防抖还是节流取决于实际的需求和用户体验。一般来说：

• 如果你需要确保用户停止操作后才执行函数，那么选择防抖会更合适，因为防抖会等待一段时间后执行函数，可以避免不必要的执行。
• 如果你需要控制函数的执行频率，以避免频繁的操作，那么选择节流会更合适，因为节流可以限制在一定时间内只执行一次函数。

选择防抖还是节流时，需要考虑以下几个因素：

1. 实际需求：确定需要限制函数执行频率的目的是什么，是为了优化性能还是为了避免重复操作。

2. 用户体验：考虑用户交互的流畅性和响应速度。如果操作需要立即响应，则可能更适合使用防抖；如果操作不需要实时响应，而是在一定时间间隔内进行处理，那么节流可能更适合。

3. 函数执行时机：确定函数应该在触发事件的开始时或结束时执行。防抖通常在事件结束后执行，而节流则可以在事件开始或结束时执行。