防抖和节流函数原理

最新推荐文章于 2024-10-12 10:41:56 发布

AAA正在输入中

最新推荐文章于 2024-10-12 10:41:56 发布

阅读量24

点赞数

文章标签：前端 javascript html

原文链接：https://zhuanlan.zhihu.com/p/655620823

版权

1. 请解释一下防抖和节流的概念及其在前端开发中的应用。

防抖（Debounce）和节流（Throttle）是前端开发中常用的优化技术，用于控制事件触发的频率，提升性能和用户体验。

防抖（Debounce）：防抖是一种技术，通过延迟执行函数来控制事件在短时间内连续触发时的执行次数，使得只有等待一定的间隔时间后，事件最后一次触发后的操作才会执行。简而言之，当事件持续触发时，防抖会等待一段时间后，执行最后一次触发的操作。

应用场景：

处理搜索框的输入事件，避免每次输入都发送请求，而是等待用户输入完毕后再发送请求。
处理窗口调整事件，避免频繁的重新渲染页面布局。
处理按钮点击事件，避免用户误操作导致重复的请求或页面跳转。

节流（Throttle）：节流是一种技术，通过控制在一定的时间间隔内只执行一次函数，来限制事件的触发次数。它确保在一个时间段内，事件处理函数被执行的最大频率为指定的间隔时间。

应用场景：

处理滚动事件，限制频繁触发的情况，例如在滚动加载场景中，只有在用户停止滚动一段时间后才加载内容。
处理鼠标移动事件，避免频繁触发事件处理函数，尤其对于一些消耗性能较大的操作，可以控制处理的频率。

比较：

防抖适合处理连续触发的事件，等待时间后执行最后一次触发的操作，常用于输入框、窗口调整等场景。
节流适合处理频繁触发的事件，限制事件处理函数的执行频率，常用于滚动、拖拽等场景。

需要注意的是，防抖和节流都是优化技术，根据实际需求和场景选择合适的方式来控制事件触发的频率。它们可以通过编写相应的函数或使用第三方库（如 Lodash）来实现。

2. 什么是防抖函数(debounce)？它是如何工作的？

防抖函数（debounce）是一种在事件处理中使用的优化技术，用于控制事件的触发频率。

防抖函数通过延迟执行事件处理函数来限制事件的连续触发，只有等待一定的时间间隔后，才会执行最后一次触发的操作。

防抖函数的工作原理如下：

设置一个定时器，在事件触发时启动计时器。
每当事件被触发时，清除之前的计时器。
重新设置一个新的计时器，等待一定的时间间隔。
如果在该时间间隔内再次触发了事件，重复步骤2和3。
在最后一个计时器完成后，执行事件处理函数。

简单来说，防抖函数会等待一段时间，如果在这段时间内事件再次触发，那么计时器就会被重置；只有在没有新的事件触发后，计时器才会完成，从而执行事件处理函数。

通过使用防抖函数，可以避免频繁触发事件导致的不必要的操作，节省资源和提升性能。常见的应用场景包括搜索框输入事件、窗口调整事件、按钮点击事件等，通过设置适当的延迟时间，可以在用户输入完毕或动作稳定后才触发相应的操作，提升用户体验。

下面是一个简单的防抖函数的实现示例，使用 JavaScript 来说明：

function debounce(func, delay) {
  let timerId;

  return function(...args) {
    clearTimeout(timerId);

    timerId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

在这个示例中，debounce 函数接受两个参数：func 表示要执行的事件处理函数，delay 表示延迟时间间隔。

返回的函数是一个闭包，每次被调用时，都会清除之前的计时器，并设置一个新的计时器来延迟执行 func 函数。最后一次触发事件后的延迟期满，就会执行 func 函数，并传递相应的参数。

通过将事件处理函数传递给防抖函数，可以得到一个新的函数，该函数可以在事件连续触发时进行控制，并在合适的时机执行相应的操作。

3. 请解释一下节流函数(throttle)？它是如何工作的？

节流函数（throttle）是一种用于控制事件触发频率的优化技术。

它通过限制事件处理函数的执行频率来避免频繁触发事件而导致的性能问题。节流函数确保在一定的时间间隔内，事件处理函数最多执行一次。

节流函数的工作原理如下：

定义一个标志位来标记事件处理函数的执行状态，初始状态为“未执行”。
设置一个计时器，在事件触发时启动计时器。
当事件触发时，检查标志位的状态：

如果标志位为“未执行”，则执行事件处理函数，并将标志位状态设置为“已执行”。
如果标志位为“已执行”，则忽略事件，不执行事件处理函数。

启动计时器后，在指定的时间间隔内，无论事件触发多少次，都不执行事件处理函数。
当计时器完成后，将标志位状态设置为“未执行”，等待下一次事件触发进行处理。

简而言之，节流函数通过设置一个时间间隔，确保事件处理函数在这个时间段内最多执行一次，并忽略其他触发的事件。

使用节流函数可以有效地控制事件触发频率，尤其在一些需要频繁触发事件的场景下，如滚动事件、拖拽事件等。通过适当设置时间间隔，可以平衡性能和平滑的交互体验。

下面是一个简单的节流函数的实现示例，使用 JavaScript 来说明：

function throttle(func, delay) {
  let timerId;
  let lastExecutedTime = 0;

  return function(...args) {
    const currentTime = Date.now();
    const elapsed = currentTime - lastExecutedTime;

    if (elapsed < delay) {
      clearTimeout(timerId);
      timerId = setTimeout(() => {
        lastExecutedTime = currentTime;
        func.apply(this, args);
      }, delay - elapsed);
    } else {
      lastExecutedTime = currentTime;
      func.apply(this, args);
    }
  };
}

在这个示例中，throttle 函数接受两个参数：func 表示要执行的事件处理函数，delay 表示时间间隔。

返回的函数是一个闭包，每次被调用时，会通过比较当前时间与上次执行的时间间隔来判断是否执行事件处理函数。

如果时间间隔大于指定的延迟时间 delay，则立即执行事件处理函数，并更新上次执行的时间戳。如果时间间隔小于 delay，则清除之前的计时器，设置一个新的计时器，在合适的时间后执行事件处理函数，并更新上次执行的时间戳。

通过将事件处理函数传递给节流函数，可以得到一个新的函数，该函数可以在一定时间间隔内控制事件的触发频率，并在合适的时机执行相应的操作。