likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 15

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

防抖(Debounce)

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

防抖的应用场景

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

防抖的实现原理

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

在 JavaScript 中,可以通过以下步骤来实现防抖:

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

防抖的代码示例

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 中,可以通过以下步骤来实现节流:

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

节流的代码示例

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。在事件触发时,如果 canExecutefalse,则直接返回;否则执行相应的操作,并将 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() 方法来指定执行的上下文。通过传递 thisapply() 方法,将函数的执行上下文设置为当前的上下文。
  • 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
评论
请登录