关于javascript中防抖和节流的使用详解

news2024/9/24 20:15:10

防抖（Debounce）和节流（Throttle）是两种常见的优化技巧，通常用于控制函数在短时间内频繁触发的场景，尤其是在处理用户输入、滚动、窗口大小调整等事件时。它们的主要目的是减少不必要的函数调用，从而提高性能和用户体验。

1. 防抖（Debounce）

防抖是指在事件触发后的一段时间内不再触发该事件，只有当事件停止触发一定时间后，才执行一次函数。每次事件触发时，如果在设定的时间间隔内再次触发，则会重新计时。

应用场景：
- 搜索框输入：用户输入停止后才发送请求，避免每次按键都触发请求。
- 窗口大小变化：在用户停止调整窗口大小后，重新布局。

防抖的实现（以 JavaScript 为例）

function debounce(fn, delay) {
    let timer;
    return function (...args) {
        const context = this;
        clearTimeout(timer);  // 清除之前的定时器
        timer = setTimeout(() => {
            fn.apply(context, args);  // 重新设置定时器
        }, delay);
    };
}

解释：
- 每次调用 debounce 返回的函数时，会先清除上一次的定时器，然后重新设置一个新的定时器。
- 当持续触发该事件时，之前的定时器会不断被清除，直到最后一次事件结束后，才会执行目标函数 fn。

使用示例

// 假设我们有一个处理输入框的函数
function handleInput() {
    console.log('Input value:', document.getElementById('input').value);
}

// 我们希望在用户停止输入后的 500ms 执行
const debouncedInputHandler = debounce(handleInput, 500);

document.getElementById('input').addEventListener('input', debouncedInputHandler);

2. 节流（Throttle）

节流是指在连续触发事件时，保证一定时间间隔内只执行一次函数，即函数调用是固定频率的，而不会因为事件频繁触发而频繁执行。

应用场景：
- 页面滚动：限制滚动事件的回调频率，防止滚动时函数被频繁调用。
- 按钮点击：防止用户多次点击按钮，触发多次事件。
- 监听鼠标移动：在拖动或滚动页面时限制频繁的回调。

节流的实现

function throttle(fn, interval) {
    let lastTime = 0;
    return function (...args) {
        const now = Date.now();
        if (now - lastTime >= interval) {
            lastTime = now;
            fn.apply(this, args);  // 执行目标函数
        }
    };
}

解释：
- lastTime 记录上一次执行函数的时间。
- 当函数触发时，检查当前时间 now 和 lastTime 的差值，如果超过设定的 interval，则执行函数并更新 lastTime。
- 在 interval 时间内的其他触发事件会被忽略。

使用示例

// 假设我们有一个处理滚动事件的函数
function handleScroll() {
    console.log('Scroll event detected');
}

// 我们希望滚动事件每 1 秒最多触发一次
const throttledScrollHandler = throttle(handleScroll, 1000);

window.addEventListener('scroll', throttledScrollHandler);

3. 防抖 vs 节流

比较点	防抖（Debounce）	节流（Throttle）
定义	事件触发后等待一定时间，如果没有再次触发才执行函数。	一定时间间隔内只执行一次函数。
适用场景	用户停止输入后发送请求、调整窗口大小后执行操作等。	限制滚动、鼠标移动、按钮点击的频率。
函数执行频率	事件停止触发后的最后一次执行。	固定时间间隔内执行一次，不管事件触发多少次。
关键点	函数会延迟执行，连续触发时只执行一次。	函数会以固定的频率执行，忽略多次触发。

4. 结合防抖与节流

有时候我们需要结合防抖和节流的特点。例如，在输入框中，用户输入时我们可以节流，用户停止输入一段时间后再进行防抖处理。

实现方式可以将防抖和节流的逻辑结合使用，也可以根据场景需求自行优化。

5. 传递参数

日常开发中我们经常需要传递参数，给业务函数进行处理，下面继续上面的示例讲解一下，这个时候该如何传递参数。

使用示例

function debounce(fn, delay) {
    let timer;
    return function (...args) {
        const context = this;
        clearTimeout(timer);  // 清除之前的定时器
        timer = setTimeout(() => {
            fn.apply(context, args);  // 重新设置定时器
        }, delay);
    };
}
// 假设我们有一个处理输入框的函数
function handleInput(event) {
    console.log('Input value:', event.target.value);
}

// 我们希望在用户停止输入后的 500ms 执行
const debouncedInputHandler = debounce(function (event) {
	handleInput(event)
}, 500);

document.getElementById('input').addEventListener('input', (event) => debouncedInputHandler(event));