前端面试必备 | 防抖和节流篇(P1-10)

文章目录

1. 请解释一下防抖和节流的概念及其在前端开发中的应用。
2. 什么是防抖函数(debounce)？它是如何工作的？
3. 请解释一下节流函数(throttle)？它是如何工作的？
4. 防抖和节流函数的主要区别是什么？
5. 在 JavaScript 中，如何实现一个防抖函数？
6. 在 JavaScript 中，如何实现一个节流函数？
7. 防抖和节流的使用场景有哪些？请举例说明。
8. 为什么在处理用户输入时常常需要使用防抖或节流？
9. 防抖和节流对于性能优化有何作用？
10. 在实际项目中使用防抖和节流的例子?

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

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

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

应用场景：

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

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

应用场景：

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

比较：

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

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

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

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

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

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

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

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

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

下面是一个简单的防抖函数的实现示例，使用 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）是一种用于控制事件触发频率的优化技术。

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

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

1. 定义一个标志位来标记事件处理函数的执行状态，初始状态为“未执行”。
2. 设置一个计时器，在事件触发时启动计时器。
3. 当事件触发时，检查标志位的状态：
   • 如果标志位为“未执行”，则执行事件处理函数，并将标志位状态设置为“已执行”。
   • 如果标志位为“已执行”，则忽略事件，不执行事件处理函数。
4. 启动计时器后，在指定的时间间隔内，无论事件触发多少次，都不执行事件处理函数。
5. 当计时器完成后，将标志位状态设置为“未执行”，等待下一次事件触发进行处理。

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

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

下面是一个简单的节流函数的实现示例，使用 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，则清除之前的计时器，设置一个新的计时器，在合适的时间后执行事件处理函数，并更新上次执行的时间戳。

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

4. 防抖和节流函数的主要区别是什么？

防抖函数（debounce）和节流函数（throttle）都是用于控制事件触发频率的优化技术，它们在实现方式和效果上有一些区别：

1. 执行时机：

   • 防抖函数：在事件连续触发后的一个等待时间间隔后执行最后一次触发的操作。
   • 节流函数：在事件触发后的一个等待时间间隔内最多执行一次事件处理函数。

2. 触发次数：

   • 防抖函数：只在事件连续触发之后的等待时间间隔结束时执行一次。
   • 节流函数：在指定的时间间隔内，最多只执行一次事件处理函数。

3. 应用场景：

   • 防抖函数：适用于需要等待事件稳定后才执行操作的场景，例如搜索框的输入事件、窗口调整事件等。
   • 节流函数：适用于需要限制事件处理函数的执行频率，保持一定的执行稳定性的场景，例如滚动事件、拖拽事件等。

4. 行为特点：

   • 防抖函数：会等待一段时间，如果在这段时间内再次触发了事件，计时器会被重置，只有在时间间隔内没有新的事件触发时，才执行事件处理函数。
   • 节流函数：在指定的时间间隔内，无论事件触发多少次，只有一次事件处理函数执行。

选择使用防抖函数还是节流函数取决于实际的需求。如果要等待事件稳定后执行操作，防抖函数更合适；如果需要限制事件处理函数的执行频率，保持一定的执行稳定性，节流函数更适用。

需要根据具体的场景和需求来选择使用防抖函数或节流函数，以获得最佳的交互体验和