JS防抖和节流的区别|极客笔记

JS防抖和节流的区别

在前端开发中，防抖（Debouncing）和节流（Throttling）是两种常见的优化性能的方式。通过限制某个函数的执行次数，可以提升用户体验，减少不必要的性能消耗。本文将详细解释防抖和节流的概念、原理和实现方式，并且比较它们之间的区别。

1. 防抖（Debouncing）

防抖是指一定时间间隔内只触发一次函数。在持续触发事件的情况下，只有当某个时间段内没有再触发事件后，才会执行该函数。常见的应用场景有输入框实时搜索、页面滚动、窗口大小变化等。

1.1 实现原理

防抖的实现原理比较简单。当事件触发后，设置一个定时器，若在设定的时间间隔内再次触发事件，则清除定时器重新开始计时，直到时间间隔内没有再次触发事件，才执行函数。

1.2 代码示例

function debounce(func, delay) {
    let timer = null;
    return function() {
        clearTimeout(timer);
        timer = setTimeout(() => {
            func.apply(this, arguments);
        }, delay);
    };
}

function handleInput() {
    // 实时搜索逻辑
}

const debounceInput = debounce(handleInput, 300);

inputElement.addEventListener('input', debounceInput);

在上面的示例代码中，debounce 函数会返回一个新的函数，在输入框输入内容时，会触发 handleInput 函数并在 300ms 内只会执行一次。

2. 节流（Throttling）

节流是指在一定时间间隔内多次触发事件，只让其在规定的时间间隔内执行一次。与防抖不同的是，节流会按照固定的时间间隔稀释函数的执行频率。常见的应用场景有滚动加载、按钮点击等。

2.1 实现原理

节流的实现原理类似于防抖，不同的是在事件触发后立即执行函数，并在指定的时间间隔内禁止再次触发。

2.2 代码示例

function throttle(func, delay) {
    let timer = null;
    return function() {
        if (!timer) {
            timer = setTimeout(() => {
                func.apply(this, arguments);
                timer = null;
            }, delay);
        }
    };
}

function handleScroll() {
    // 滚动加载逻辑
}

const throttleScroll = throttle(handleScroll, 300);

window.addEventListener('scroll', throttleScroll);

在上面的示例代码中，throttle 函数会返回一个新的函数，在滚动事件发生时，会执行 handleScroll 函数，但是在 300ms 内只会执行一次。