防抖与节流 - 2024最新版前端秋招面试短期突击面试题【100道】

防抖与节流 - 2024最新版前端秋招面试短期突击面试题【100道】 ⏲️

在JavaScript中，防抖（Debouncing）与节流（Throttling）是两种常用的性能优化技术，尤其在处理频繁触发的事件时，如滚动、窗口调整大小或键盘输入等。理解这两者的定义和用法能帮助你在开发中写出更高效的代码。

防抖（Debouncing） 🔄

定义

防抖是一种确保某个函数在指定时间内只执行一次的技术。换句话说，当事件被触发后，只有在事件停止触发一段时间后，才会执行指定的函数。

使用场景

适用于那些需要在用户停止某种操作后才执行的场景，比如搜索框输入、按钮点击等。

示例代码

function debounce(func, wait) {
    let timeout;
    return function() {
        const context = this;
        const args = arguments;
        clearTimeout(timeout);
        timeout = setTimeout(function() {
            func.apply(context, args);
        }, wait);
    };
}

// 使用
window.addEventListener('resize', debounce(function() {
    console.log('Resized!');
}, 250));

在上面的示例中，debounce函数返回了一个新的函数，这个新函数会延迟执行原函数func，如果在等待时间内再次触发，则会重新开始计时。

节流（Throttling） ⏳

定义

节流技术确保函数以固定的频率执行，不管事件触发了多少次，在指定的时间间隔内只会执行一次。

使用场景

适用于那些需要以固定频率执行的场景，例如滚动事件处理、窗口大小调整等。

示例代码

function throttle(func, limit) {
    let inThrottle;
    return function() {
        const args = arguments;
        const context = this;
        if (!inThrottle) {
            func.apply(context, args);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    };
}

// 使用
window.addEventListener('scroll', throttle(function() {
    console.log('Scrolled!');
}, 100));

在上面的示例中，throttle函数返回了一个新的函数，这个新函数会立即执行原函数func，然后在指定的时间间隔内，无论事件触发了多少次，都不会再次执行。

比较 🔍

防抖：适合连续操作结束后只执行一次的情况，如搜索框输入。在用户输入停止后，等待指定时间再执行。
节流：适合需要持续以固定频率执行的情况，如滚动事件。函数在每个固定的时间间隔内执行一次，不管事件触发的频率有多高。

总结

两者的目的都是减少函数的执行次数，但它们的行为不同：

防抖是在一段时间后才执行。
节流是按照固定的时间间隔执行。

根据具体的使用场景，选择合适的优化策略可以显著提高应用的性能和用户体验。理解并应用这些技术将帮助你在面试中展示你的前端开发能力，祝你顺利上岸！