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

防抖和节流

news 来源：原创 2025/5/15 8:25:43

防抖（Debounce）和节流（Throttle）是前端开发中常用的两种性能优化技术，主要用于控制高频事件的触发频率，避免不必要的性能消耗。

1. 防抖（Debounce）

防抖的核心思想：在事件被触发后，等待一段时间（例如 n 毫秒），如果在这段时间内事件没有被再次触发，那么就执行事件处理函数。如果在这段时间内事件又被触发，则重新计时。

应用场景：输入框实时搜索、窗口大小调整、滚动事件等。

代码实现

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

// 示例：输入框防抖
const input = document.querySelector('input');
const debouncedSearch = debounce(function() {
    console.log('Searching for:', input.value);
}, 300);

input.addEventListener('input', debouncedSearch);

代码解析

debounce 函数：接受两个参数，func 是需要防抖的函数，wait 是等待时间。
timeout 变量：用于存储定时器 ID。
返回的函数：每次事件触发时，清除之前的定时器，并重新设置一个新的定时器。
func.apply(context, args)：在定时器结束后执行传入的函数，并确保 this 和参数的正确传递。

2. 节流（Throttle）

节流的核心思想：在一定时间间隔内（例如 n 毫秒），无论事件触发多少次，只执行一次事件处理函数。

应用场景：滚动加载、按钮点击、鼠标移动等。

代码实现

function throttle(func, wait) {
    let lastTime = 0;
    return function(...args) {
        const now = Date.now();
        if (now - lastTime >= wait) {
            func.apply(this, args);
            lastTime = now;
        }
    };
}

// 示例：滚动节流
const throttledScroll = throttle(function() {
    console.log('Scrolling...');
}, 200);

window.addEventListener('scroll', throttledScroll);

代码解析

throttle 函数：接受两个参数，func 是需要节流的函数，wait 是时间间隔。
lastTime 变量：记录上一次执行函数的时间。
返回的函数：每次事件触发时，检查当前时间与上一次执行时间的差值是否大于等于 wait，如果是则执行函数并更新 lastTime。

3. 防抖与节流的区别

防抖：在事件停止触发后一段时间内执行一次函数。适合处理连续触发但只需要最后一次结果的情况。
节流：在一定时间间隔内执行一次函数。适合处理连续触发但需要均匀执行的情况。

4. 结合使用防抖和节流

在某些场景下，防抖和节流可以结合使用。例如，在滚动事件中，可以先使用节流来限制函数的执行频率，然后在滚动停止后再使用防抖来执行最终的操作。

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

function throttle(func, wait) {
    let lastTime = 0;
    return function(...args) {
        const now = Date.now();
        if (now - lastTime >= wait) {
            func.apply(this, args);
            lastTime = now;
        }
    };
}

const combinedScrollHandler = throttle(debounce(function() {
    console.log('Scrolling stopped');
}, 300), 100);

window.addEventListener('scroll', combinedScrollHandler);