【前端常见面试题】防抖与节流

站长

2023年06月10日 15:23 · 阅读数 16

简介：在前端开发中，防抖和节流是两个常见的概念，用于处理频繁触发的事件或函数。之前整理防抖与节流的文章，但是细节不全，本文将详细解释防抖和节流的概念，以及应用场景，并提供实际代码示例，帮助更好地理解和掌握这两个常见的前端面试题。

防抖（Debounce）

防抖是指在事件触发后等待一段时间再执行相应的操作，如果在这段时间内再次触发了同一事件，那么将重新计时。这样可以避免事件的频繁触发，提高性能和用户体验。

防抖的应用场景

输入框实时搜索：当用户在输入框中连续输入时，可以通过防抖来减少实时搜索的请求次数，只在用户停止输入一段时间后才发送请求。
窗口调整事件（resize）：当窗口大小调整时，防抖可以确保只在用户完成调整后执行相应的操作，例如重新布局页面。

防抖的实现原理

防抖的实现原理主要涉及定时器和函数闭包。

在 JavaScript 中，可以通过以下步骤来实现防抖：

在闭包中，创建一个变量用于存储定时器的标识。
当事件触发时，首先清除之前的定时器。
创建一个新的定时器，在指定的等待时间后执行相应的操作。

防抖的代码示例

function debounce(func, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, arguments);
    }, delay);
  };
}

// 使用防抖函数包装事件处理函数
const debouncedEventHandler = debounce(eventHandler, 300);

// 实际事件处理函数
function eventHandler() {
  // 执行相应的操作
}

在上述代码中，debounce 函数接受两个参数：func 表示要执行的事件处理函数，delay 表示等待的时间间隔。返回的函数是事件的防抖处理函数，通过闭包保存了定时器的标识。在事件触发时，会清除之前的定时器并创建一个新的定时器，等待一段时间后执行相应的操作。

节流（Throttle）

节流是指在一定时间内，只执行一次相应的操作。不论事件触发多频繁，都会按照固定的时间间隔执行。

节流的应用场景

频繁点击按钮：当用户连续点击一个按钮时，可以通过节流来限制按钮的触发频率，防止误操作或者多次提交表单。
页面滚动事件（scroll）：当用户滚动页面时，节流可以控制事件处理函数的执行频率，减少计算和渲染的次数。

节流的实现原理

节流的实现原理也涉及定时器和函数闭包。

在 JavaScript 中，可以通过以下步骤来实现节流：

创建一个变量用于标记是否可以执行操作。
当事件触发时，检查标记变量，如果可以执行操作，则执行相应的操作，并将标记变量设为不可执行。
创建一个定时器，在指定的时间间隔后将标记变量设为可执行。

节流的代码示例

function throttle(func, delay) {
  let canExecute = true;
  return function() {
    if (!canExecute) return;
    canExecute = false;
    setTimeout(() => {
      func.apply(this, arguments);
      canExecute = true;
    }, delay);
  };
}

// 使用节流函数包装事件处理函数
const throttledEventHandler = throttle(eventHandler, 300);

// 实际事件处理函数
function eventHandler() {
  // 执行相应的操作
}

在上述代码中，throttle 函数接受两个参数：func 表示要执行的事件处理函数，delay 表示时间间隔。返回的函数是事件的节流处理函数，通过闭包保存了一个标记变量 canExecute。在事件触发时，如果 canExecute 为 false，则直接返回；否则执行相应的操作，并将 canExecute 设置为 false，然后创建一个定时器，在指定的时间间隔后将 canExecute 设置为 true。

func.apply(this, arguments)

无论是防抖中、还是节流中都使用了func.apply(this, arguments)，那么它的作用和使用场景是怎么样的呢？下面我们用节流举例说明

实现原理

在节流函数中，func.apply(this, arguments) 的作用是执行传入的事件处理函数，并将事件参数传递给它。

具体来说，func.apply(this, arguments) 中的参数含义如下：

func：表示传入的事件处理函数或操作函数，它是一个可调用的函数对象。
apply() 方法：是 JavaScript 函数对象的一个方法，用于在指定的上下文中调用函数，并可以传递一个参数数组。
this：在节流函数中，我们希望将事件处理函数在正确的上下文中执行，所以使用 apply() 方法来指定执行的上下文。通过传递 this 给 apply() 方法，将函数的执行上下文设置为当前的上下文。
arguments：在 JavaScript 函数中，arguments 对象包含了当前函数调用的所有参数。通过将 arguments 作为参数传递给 apply() 方法，可以将参数数组传递给被调用的函数。

代码示例

下面是一个示例来说明在防抖函数中为什么使用 func.apply(this, arguments)：

function throttle(func, delay) {
  let canExecute = true;
  return function() {
    if (!canExecute) return;
    canExecute = false;
    setTimeout(() => {
      func.apply(this, arguments);
      canExecute = true;
    }, delay);
  };
}

// 实际事件处理函数
function eventHandler(event) {
  console.log("Event:", event);
  // 执行其他操作...
}

// 使用节流函数包装事件处理函数
const throttledEventHandler = throttle(eventHandler, 300);

// 添加事件监听器，使用节流处理函数
document.addEventListener("scroll", function(event) {
  throttledEventHandler(event);
});

在上述示例中，我们使用节流函数 throttle 来处理 scroll 事件。每当用户滚动页面时，节流处理函数 throttledEventHandler 会被触发，并且会传递原始的滚动事件参数 event 给事件处理函数 eventHandler。

这样，在滚动过程中，事件处理函数 eventHandler 当用户滚动页面时，节流可以控制事件处理函数的执行频率。这样可以减少事件处理函数的执行次数，提高性能和用户体验。

通过使用 func.apply(this, arguments)，我们确保了事件处理函数在正确的上下文中执行，并传递了原始的事件参数。这样，我们可以在实际的事件处理函数中使用 event 参数来获取事件的相关信息。

结语

防抖和节流是前端开发中常见的面试题，也是实际项目中经常用到的技巧。通过合理使用，我们可以优化事件的处理，提高性能和用户体验。通过本文的解析和代码示例，希望能更好地帮助理解和应用防抖和节流技术。

转载自:https://juejin.cn/post/7238917340208382010