JS中的函数防抖和节流：提升性能的关键技术

news2025/6/4 7:29:26

在JavaScript开发中，函数防抖和节流是两种常用的优化技术，用于处理那些可能会被频繁触发的事件，如resize、scroll、mousemove等。本文将详细介绍函数防抖和节流的概念、实现方法以及它们之间的区别。

一、什么是函数防抖和节流？

（一）函数防抖（Debounce）

函数防抖是指在一定时间内，多次触发事件时，只执行最后一次触发的事件处理函数。它的核心思想是：在事件被触发后延迟执行回调函数，如果在这段时间内事件再次被触发，则重新计时。

例如，搜索框的实时搜索功能。用户在输入文字时，我们不需要在每次按键时都发送请求，而是等待用户停止输入一段时间后，再发送请求。这样可以显著减少请求的次数，提高性能。

（二）函数节流（Throttle）

函数节流是指在一定时间内，多次触发事件时，只执行一次事件处理函数。它的核心思想是：在事件被触发的时间间隔内，只执行一次回调函数。

例如，页面的滚动事件。如果在滚动过程中频繁触发事件处理函数，可能会导致性能问题。通过节流，我们可以限制事件处理函数的执行频率，从而提高性能。

二、函数防抖的实现

（一）基本实现

函数防抖的实现思路是：使用setTimeout来延迟执行事件处理函数，如果在延迟时间内事件再次被触发，则清除之前的定时器，重新计时。

function debounce(func, wait) {
    let timerId = null;
    return function (...args) {
        if (timerId) {
            clearTimeout(timerId);
        }
        timerId = setTimeout(() => {
            func(...args);
        }, wait);
    };
}

（二）实际应用

以下是一个使用函数防抖的示例，用于优化搜索框的实时搜索功能：

<input type="text" id="searchBox">

const searchBox = document.getElementById("searchBox");

function handleSearch(event) {
    console.log("Searching for:", event.target.value);
}

const debouncedSearch = debounce(handleSearch, 500);

searchBox.addEventListener("input", debouncedSearch);

在这个示例中，用户在搜索框中输入文字时，handleSearch函数不会立即执行，而是等待用户停止输入500毫秒后才执行。这样可以显著减少不必要的搜索请求。

三、函数节流的实现

（一）使用时间戳

函数节流的第一种实现方式是使用时间戳。每次事件触发时，检查当前时间与上次执行的时间差，如果大于设定的时间间隔，则执行事件处理函数。

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

（二）使用定时器

函数节流的第二种实现方式是使用定时器。每次事件触发时，如果定时器不存在，则设置一个定时器，定时器到期后执行事件处理函数。

function throttle(func, wait) {
    let timeout = null;
    return function (...args) {
        if (!timeout) {
            timeout = setTimeout(() => {
                func(...args);
                timeout = null;
            }, wait);
        }
    };
}

（三）实际应用

以下是一个使用函数节流的示例，用于优化页面的滚动事件：

<div style="height: 2000px;">
    <p>Scroll down to see the effect.</p>
</div>

function handleScroll(event) {
    console.log("Scrolling...");
}

const throttledScroll = throttle(handleScroll, 1000);

window.addEventListener("scroll", throttledScroll);