JavaScript防抖与节流的运用

防抖（Debounce）

• 概念：
  • 防抖是指在事件被触发 n 秒后再执行回调，如果在这 n 秒内又被触发，则重新计时。防抖的主要目的是将多次连续触发的事件合并为一次执行，适用于例如输入框输入搜索内容时，避免频繁发送请求，只在用户停止输入一段时间后才发送请求。
• 实现思路：
  1. 创建一个定时器。
  2. 当事件触发时，清除之前的定时器。
  3. 重新创建一个新的定时器，在指定延迟时间后执行回调函数。

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

// 示例
function handleInput() {
    console.log('执行输入操作');
}

const debouncedHandleInput = debounce(handleInput, 300);

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

代码解释：

• debounce 函数接收两个参数：
  • func：需要执行的回调函数。
  • delay：延迟时间（以毫秒为单位）。
• let timer;：存储定时器的变量。
• return function (...args) {...}：返回一个新的函数，当事件触发时调用。
  • clearTimeout(timer);：清除之前的定时器。
  • timer = setTimeout(() => {...}, delay);：创建一个新的定时器，在 delay 毫秒后执行 func 函数。

 

节流（Throttle）

• 概念：
  • 节流是指在一定时间内只允许函数执行一次。例如滚动事件，防止在滚动过程中频繁触发回调函数，影响性能。
• 实现思路：
  1. 记录上次执行时间。
  2. 当事件触发时，检查当前时间与上次执行时间的差。
  3. 如果超过指定时间间隔，执行回调函数并更新上次执行时间。

function throttle(func, delay) {
    let lastCall = 0;
    return function (...args) {
        const now = new Date().getTime();
        if (now - lastCall < delay) {
            return;
        }
        lastCall = now;
        return func(...args);
    };
}

// 示例
function handleScroll() {
    console.log('执行滚动操作');
}

const throttledHandleScroll = throttle(handleScroll, 200);

window.addEventListener('scroll', throttledHandleScroll);

代码解释：

• throttle 函数接收两个参数：
  • func：需要执行的回调函数。
  • delay：时间间隔（以毫秒为单位）。
• let lastCall = 0;：存储上次执行函数的时间。
• return function (...args) {...}：返回一个新的函数，当事件触发时调用。
  • const now = new Date().getTime();：获取当前时间。
  • if (now - lastCall < delay) {...}：如果距离上次执行时间小于 delay 毫秒，不执行函数。
  • lastCall = now;：更新上次执行时间。

运用场景

• 防抖：
  • 搜索框输入搜索。
  • 窗口大小调整时重新计算布局。
  • 按钮点击时发送请求。
• 节流：
  • 滚动事件处理。
  • 鼠标移动事件处理。