防抖和节流

防抖（Debounce）和节流（Throttle）是两种常见的优化前端性能的技术，它们的主要区别在于触发执行的时间和频率。

防抖（Debounce）：

防抖的原理是在一定的时间内，只执行最后一次触发的事件。如果在等待时间内再次触发事件，会重新计时。这样可以确保在连续触发事件时，只有最后一次触发会被执行。

防抖的实现方式通常有两种：

使用定时器：每次触发事件时，先清除之前的定时器，然后设置一个新的定时器，等待一定时间后执行事件。

使用时间戳：记录上次触发事件的时间戳，在触发事件时，判断当前时间与上次触发的时间间隔，如果小于设定的时间阈值，忽略该事件；否则执行事件。

防抖的应用场景包括搜索框输入检索、窗口调整监听、按钮点击防重复提交等，可以有效降低事件触发的频率。

实现思路

1. 创建一个定时器变量，用来保存定时器的标识。
2. 当事件被触发时，先清除之前的定时器。
3. 创建一个新的定时器，延迟一定的时间后执行事件的处理函数。
4. 如果在延迟时间内再次触发了该事件，就会重复步骤2和步骤3。
5. 当延迟时间内没有再次触发事件，定时器会执行事件的处理函数。

 

//下面是一个简单的防抖函数的实现示例：
function debounce(func, delay) {
  let timer = null;

  return function() {
    const context = this;
    const args = arguments;

    clearTimeout(timer);

    timer = setTimeout(function() {
      func.apply(context, args);
    }, delay);
  };
}

//使用该防抖函数可以对需要进行防抖处理的事件进行包装。例如：
function handleScroll() {
  // 处理滚动事件
}

window.addEventListener('scroll', debounce(handleScroll, 200));


//handleScroll()函数会在滚动事件触发时执行。通过debounce()函数对handleScroll()进行包装，传入延迟时间（例如200毫秒）来实现防抖效果。这样在滚动过程中，如果短时间内连续触发了滚动事件，只有当停止滚动后超过200毫秒才会执行handleScroll()函数。这样可以减少滚动事件频繁触发导致的性能问题。

节流（Throttle）：

节流的原理是在一定的时间间隔内，固定执行事件。无论触发事件的频率多高，都会按照设定的时间间隔来执行事件。相当于限制了事件的触发频率。

节流的实现方式通常有两种：

使用定时器：在触发事件时，设置一个定时器，等待一定时间后执行事件，期间无论触发事件的频率多高，都会忽略后续的事件触发。

使用时间戳：记录上次执行事件的时间戳，在设定的时间间隔内，只执行一次事件；超过时间间隔后，再次触发才能执行事件，并更新上次执行的时间戳。

节流的应用场景包括页面滚动、鼠标移动、窗口调整监听等，可以减少事件的触发频率，提升性能和用户体验。

节流的实现思路：

1. 创建一个标识变量，用来表示当前是否可以执行事件处理函数。
2. 当事件被触发时，首先检查标识变量的值。
3. 如果标识变量为真，则执行事件处理函数，并将标识变量设置为假。
4. 创建一个定时器，在指定的时间间隔后将标识变量设置为真。
5. 如果在定时器的时间间隔内再次触发了事件，就会重复步骤2和步骤3。
6. 当定时器的时间间隔到达后，标识变量会重新变为真，可以再次执行事件处理函数。

 

//简单的节流函数的实现示例：
function throttle(func, delay) {
  let canRun = true;

  return function() {
    if (!canRun) {
      return;
    }

    canRun = false;

    setTimeout(function() {
      func.apply(this, arguments);
      canRun = true;
    }, delay);
  };
}


//使用该节流函数可以对需要进行节流处理的事件进行包装。例如：

function handleResize() {
  // 处理窗口大小变化事件
}

window.addEventListener('resize', throttle(handleResize, 200));

//在上述代码中，handleResize()函数会在窗口大小变化事件触发时执行。通过throttle()函数对handleResize()进行包装，传入时间间隔（例如200毫秒）来实现节流效果。这样在窗口大小变化过程中，无论触发多频繁，每隔200毫秒只会执行一次handleResize()函数。这样可以控制事件处理函数的触发频率，避免频繁执行导致的性能问题。



//输入框搜索联想（Input Search Suggestions）：
//当用户在输入框中输入文字时，有时候需要根据输入的内容提供搜索联想功能。为了避免频繁发送请求或执行搜索逻辑，可以利用节流技术延迟搜索的触发。

function handleInputChange(value) {
  // 执行搜索联想相关操作
}

const inputElement = document.getElementById('search-input');
inputElement.addEventListener('input', throttle(function() {
  handleInputChange(inputElement.value);
}, 500));

在这个例子中，handleInputChange()函数是根据输入内容执行搜索联想操作的函数。通过使用throttle()函数将其进行节流处理，并传入500毫秒的时间间隔。这样在用户输入时，每500毫秒只会执行一次搜索联想操作，以减少请求或执行的次数。

综上所述，防抖和节流在实现方式和效果上有所区别，但都是为了优化前端性能。防抖适合在连续触发事件时，只关心最后一次触发的情况；而节流适合限制事件触发的频率，确保一定时间间隔内只执行一次事件。根据具体的业务需求，选择合适的技术来优化前端交互。

应用场景

防抖在连续的事件，只需触发一次回调的场景有：

搜索框搜索输入。只需用户最后一次输入完，再发送请求

手机号、邮箱验证输入检测

窗口大小resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

节流在间隔一段时间执行一次回调的场景有：

滚动加载，加载更多或滚到底部监听

搜索框，搜索联想功能