简介： 在前端开发中，防抖和节流是两个常见的概念，用于处理频繁触发的事件或函数。之前整理防抖与节流的文章，但是细节不全，本文将详细解释防抖和节流的概念，以及应用场景，并提供实际代码示例，帮助更好地理解和掌握这两个常见的前端面试题。
防抖（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 参数来获取事件的相关信息。
结语
防抖和节流是前端开发中常见的面试题，也是实际项目中经常用到的技巧。通过合理使用，我们可以优化事件的处理，提高性能和用户体验。通过本文的解析和代码示例，希望能更好地帮助理解和应用防抖和节流技术。
