防抖与节流

一、防抖（Debounce）

一种用于优化性能和减少不必要请求的技术。

防抖函数会延迟触发某个事件处理函数，并在一段时间内只执行一次。如果在延迟时间内多次触发了同一个事件，防抖函数会取消之前的延迟执行，并重新开始计时，直到延迟时间内没有新的触发，最后才执行一次事件处理函数。

限制某个函数在一定时间内被频繁调用，以减少不必要的计算和网络请求。

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

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

防抖的应用场景有很多，主要包括：

1. 表单验证：当用户输入框输入内容时，使用防抖来验证输入的合法性。
2. 搜索框联想搜索：当用户在搜索框中输入时，触发搜索事件的处理函数。由于用户的输入可能连续几次触发，使用防抖函数可以避免频繁的搜索请求，只在用户输入结束后触发一次搜索。
3. 窗口调整：当用户调整浏览器窗口大小时，触发窗口大小变化事件的处理函数。使用防抖函数可以有效控制窗口调整事件的频率，避免过多的布局计算和页面重绘。
4. 按钮点击：当用户频繁点击一个按钮时，使用防抖来限制点击次数，防止多次提交。

5. 页面滚动：当用户滚动页面时，触发滚动事件的处理函数，但由于滚动事件的触发频率很高，使用防抖函数可以减少处理函数的触发次数，减轻浏览器的工作负担。

下面是一个防抖的示例代码：

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 timeout = null;
/**
*防抖原理：一定时间内，只有最后一次操作，再过wait毫秒后才执行函数
*
*@param {Function} func 要执行的回调函数
*@param {Number} wait 延时时间
*@param {Boolean} immediate 是否立即执行
*@return null
*/
export function debounce(func, wait = 500, immediate = false){
    //清除定时器
    if(timeout !== null) clearTimeout(timeout);
    //立即执行，此类情况一般用不到
    if(immediate){
        var callNow = !timeout;
        timeout = setTimeout(function(){
            timeout = null;
        },wait);
        if(callNow) typeof func === 'function' && func();
    } else {
        //设置定时器，当最后一次操作后，timeout不会再被清除，在延时wait毫秒后执行func回调函数
        timeout = setTimeout(function() {
            typeof func === 'function' && func();
        },wait);
    }
}

二、节流（Throttle）

前端节流是一种限制函数执行频率的技术。节流函数会在一定时间间隔内对函数的多次调用进行限制，确保在该时间间隔内函数只会执行一次。

通常情况下，当一个事件被频繁地触发时，如果不进行节流处理，可能会导致函数被连续执行多次，消耗过多的资源，甚至影响用户体验。通过节流技术，我们可以控制函数的执行频率，以便在一定时间段内只执行一次或者少量次。

节流函数的主要应用场景包括：

1. 按钮点击：当用户频繁点击按钮时，使用节流函数可以防止多次响应，确保只执行一次点击事件的处理函数。

2. 页面滚动：当用户滚动页面时，触发滚动事件的处理函数。使用节流函数可以限制滚动事件的触发频率，减少处理函数的调用次数，提高性能。

3. 输入框输入：当用户在输入框中输入时，触发输入事件的处理函数。使用节流函数可以延迟触发处理函数，减少函数调用次数，避免频繁的数据处理或请求发送。

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

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

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

思考以上因素，可以根据实际需求选择适合的防抖或节流。如果不确定，也可以根据具体情况进行性能测试和用户体验测试，以确定最佳的选择。