前端性能优化---防抖与节流--02

防抖（Debounce）和节流（Throttle）是两种常用的优化技术，主要用于控制高频率的事件触发，如滚动、输入、窗口调整大小等。本文将深入探讨防抖与节流的原理、实现方法及其应用场景。

简单场景就是：输入框防抖，滚动节流

 

1. 防抖（Debounce）

防抖是一种在事件频繁触发时，通过延迟执行来减少事件触发次数的技术。防抖的核心思想是：当事件被触发时，不立即执行处理函数，而是设置一个定时器，如果在定时器未结束前再次触发事件，则重新开始计时。这样可以确保在一定时间内只执行一次事件处理函数。

实现原理：

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

 

示例应用：

在搜索框输入时，实时发送请求获取搜索建议。如果不进行防抖处理，每次输入都会发送请求，造成服务器压力和资源浪费。通过防抖可以优化这种场景：

const searchInput = document.getElementById('search');
const handleSearch = debounce((event) => {
    console.log('Fetching search results for:', event.target.value);
    // 发送搜索请求
}, 300);

searchInput.addEventListener('input', handleSearch);

 

2. 节流（Throttle）

节流是一种在事件频繁触发时，通过限制函数执行频率来减少事件处理次数的技术。节流的核心思想是：在规定的时间间隔内只执行一次事件处理函数，不论期间事件触发了多少次。

实现原理：

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

 

示例应用：

在页面滚动时，实时计算滚动位置以显示回到顶部按钮。如果不进行节流处理，滚动事件会频繁触发，导致性能问题。通过节流可以优化这种场景：

const handleScroll = throttle(() => {
    console.log('Scroll position:', window.scrollY);
    // 处理滚动事件
}, 200);

window.addEventListener('scroll', handleScroll);

 

3. 防抖与节流的选择

防抖和节流虽然都是用于控制高频事件，但它们的应用场景有所不同：

• 防抖：适用于频繁触发但只需最后一次结果的场景，如搜索输入、窗口大小调整等。
• 节流：适用于持续触发但需要定期执行的场景，如滚动事件、窗口滚动位置计算等。

4. 深入优化

立即执行版防抖：

有时我们希望在事件触发时立即执行一次，然后再进行防抖控制，可以在防抖函数中添加一个立即执行选项：

function debounce(func, wait, immediate) {
    let timeout;
    return function(...args) {
        const context = this;
        const callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(() => {
            timeout = null;
            if (!immediate) func.apply(context, args);
        }, wait);
        if (callNow) func.apply(context, args);
    };
}

 

带有标识的节流：

有时我们希望在节流过程中能够获取到当前的状态，可以在节流函数中添加一个标识：

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

 

5. 综合应用

在实际开发中，防抖与节流可以结合使用。例如在一个实时搜索的页面中，用户输入时进行防抖处理，而在结果展示时进行节流处理，以优化整体性能。

 

const searchInput = document.getElementById('search');
const resultsContainer = document.getElementById('results');

const fetchResults = debounce((query) => {
    console.log('Fetching results for:', query);
    // 模拟搜索请求
    setTimeout(() => {
        resultsContainer.innerHTML = `Results for: ${query}`;
    }, 500);
}, 300);

const handleScroll = throttle(() => {
    console.log('Scroll position:', window.scrollY);
    // 处理滚动事件
}, 200);

searchInput.addEventListener('input', (event) => {
    fetchResults(event.target.value);
});

window.addEventListener('scroll', handleScroll);

防抖与节流是前端性能优化中的两项重要技术，通过合理地应用这两种技术，可以显著减少高频事件带来的性能问题，提升用户体验。其他性能优化技术，如代码分割、异步加载、懒加载等，后续介绍。