深入理解 JavaScript 的防抖与节流

拽住星星的衣领
205 阅读5分钟

引言

在前端开发中，我们经常会遇到需要频繁触发事件的场景，如窗口调整大小、滚动页面、用户输入等。这些事件的频繁触发可能导致性能问题，影响用户体验。为了解决这个问题，JavaScript 提供了两种常用的优化技术：防抖（Debounce）和节流（Throttle）。本文将详细介绍这两种技术的原理、实现方法及其应用场景。

什么是防抖（Debounce）？

防抖是一种优化技术，用于控制某个函数在高频触发时的执行次数。具体来说，防抖会让函数在某个事件高频率触发时只执行一次，且是在事件停止触发后的一段时间再执行。如果在等待的时间内该事件再次触发，则重新计时。

1. 工作原理

防抖的核心思想是延迟函数的执行，只有在指定的时间窗口内不再发生新的触发时，才会真正执行函数。这在处理例如用户输入、窗口大小调整等场景时非常有用。

2. 代码实现

以下是防抖函数的一个简单实现：

function debounce(func, delay) {
    let timeout;  // 用于存储计时器的变量
    return function(...args) {  // 返回一个闭包函数，以便在外部调用时使用
        clearTimeout(timeout);  // 清除之前的计时器，避免之前的函数执行
        timeout = setTimeout(() => {  // 设置新的计时器
            func.apply(this, args);  // 在 delay 时间后执行原函数
        }, delay);
    };
}

  • timeout 变量：用于保存当前的计时器。当用户输入频繁触发时，每次调用函数都会先清除之前的计时器，然后重新启动一个新的计时器。

  • clearTimeout(timeout)：这是防抖的关键部分。每次调用防抖函数时，它首先会清除上一次设置的计时器，从而防止上一次函数执行。这确保了只有在停止触发事件一段时间后，函数才会执行。

  • setTimeout(() => { func.apply(this, args); }, delay)：在指定的延迟时间后，真正执行原函数。这意味着只有在用户停止输入 300 毫秒后，handleSearch 函数才会被调用。

  • func.apply(this, args)：apply 方法用于调用函数并传递当前的执行上下文 (this) 和参数 (args)，确保函数在正确的上下文中执行。

3. 使用示例

假设我们需要处理用户输入搜索的场景，当用户输入时，实时调用搜索 API 可能会带来性能问题，这时候就可以使用防抖。

const handleSearch = debounce(function(event) {
    console.log('Searching for:', event.target.value);  // 输出用户输入的内容
}, 300);

document.getElementById('searchInput').addEventListener('input', handleSearch);

在这个例子中，handleSearch 函数只有在用户停止输入 300 毫秒后才会执行，从而避免了频繁调用搜索 API 的问题。

什么是节流（Throttle）？

节流是一种优化技术，用于限制某个函数在高频触发时的执行频率。不同于防抖，节流会确保在规定的时间间隔内，函数最多只会执行一次。

1. 工作原理

节流的核心思想是控制函数的执行频率，即在连续触发事件时，函数按照指定的时间间隔执行。例如，限制函数每隔 100 毫秒最多执行一次。

2. 代码实现

以下是节流函数的一个简单实现：

function throttle(func, limit) {
    let lastFunc;  // 用于存储最后一次执行的计时器
    let lastRan;  // 用于存储最后一次执行函数的时间
    return function(...args) {
        const context = this;
        if (!lastRan) {  // 如果函数之前没有执行过
            func.apply(context, args);  // 立即执行函数
            lastRan = Date.now();  // 记录执行时间
        } else {
            clearTimeout(lastFunc);  // 清除之前的计时器
            lastFunc = setTimeout(function() {  // 设置新的计时器
                if ((Date.now() - lastRan) >= limit) {  // 判断是否超过了限制时间
                    func.apply(context, args);  // 执行函数
                    lastRan = Date.now();  // 更新最后执行的时间
                }
            }, limit - (Date.now() - lastRan));  // 计算还需等待的时间
        }
    };
}

  • lastRan 变量：用于存储上一次函数执行的时间。如果 lastRan 为空，说明函数从未执行过，则立即执行函数并记录当前时间。

  • clearTimeout(lastFunc)：在函数还未到达规定时间间隔内再次触发时，先清除之前的计时器。

  • setTimeout 内部逻辑：在每次触发事件时，计算从上次执行到现在所经历的时间，并在时间足够时再次执行函数。lastRan 更新为当前时间，确保在指定的时间间隔内，函数不会多次执行。

  • limit - (Date.now() - lastRan)：这个计算确保了距离上次执行的时间越短，下一次执行的延迟时间就越短，从而保证了函数按照设定的 limit 频率被调用。

3. 使用示例

假设我们需要处理页面滚动事件，在用户滚动页面时触发某些计算或动画效果。

const handleScroll = throttle(function() {
    console.log('Scroll event triggered');  // 每次滚动触发时，输出信息
}, 200);

window.addEventListener('scroll', handleScroll);

在这个例子中，handleScroll 函数最多每隔 200 毫秒执行一次，即使用户持续滚动页面。

防抖与节流的区别

尽管防抖和节流都是为了优化高频事件的触发，但它们在执行逻辑上有显著的区别：

  • 防抖（Debounce）：只有在事件触发停止后的一段时间内不再触发时，才会执行函数。如果事件在延迟时间内再次触发，计时器会重置。
  • 节流（Throttle）：在连续触发事件时，函数按照固定的时间间隔执行，而不管事件触发频率如何。
推荐的使用场景
  • 防抖：适用于只需要在事件停止触发后执行一次的场景。例如，用户停止输入后再发送请求。
  • 节流：适用于需要在高频率触发事件时限制执行次数的场景。例如，限制窗口滚动时的事件处理频率。

结论

防抖和节流是 JavaScript 中两种非常重要的优化技术，能够有效地提升前端应用的性能和用户体验。理解它们的工作原理和应用场景，并正确地加以实现，可以帮助开发者避免因频繁事件触发导致的性能瓶颈。在实际开发中，合理选择防抖或节流策略，将为您的项目带来显著的性能提升。

avatar
文章
阅读
粉丝