当前位置：首页 > article >正文

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

article 2024/11/4 19:53:09

防抖与节流 - 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));