超时完成后多次运行的Debounce函数

基础概念

Debounce 是一种常用的前端技术，用于限制某个函数在特定时间内的执行次数。当一个事件被触发后，Debounce 函数会等待一段时间，如果在这段时间内没有再次触发该事件，则执行该函数；如果在等待期间再次触发该事件，则重新开始计时。

类型

立即执行Debounce：在等待时间结束后立即执行函数。
延迟执行Debounce：在等待时间结束后，如果再次触发事件，则重新计时，直到没有新的触发事件为止。

应用场景

输入框实时搜索：用户在输入框中输入内容时，等待一段时间后再进行搜索请求，避免每次按键都发送请求。
窗口调整大小：监听窗口大小变化事件，等待一段时间后再进行布局调整。
滚动事件：监听滚动事件，等待一段时间后再进行某些操作，如懒加载图片。

问题与解决方案

问题：超时完成后多次运行的Debounce函数

原因：通常是因为在Debounce函数的等待时间内，事件被多次触发，导致多个定时器同时存在，当等待时间结束后，这些定时器都会执行对应的函数。

解决方案：

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

示例代码：

// 示例函数
function handleInput() {
  console.log('Input handled');
}

// 创建Debounce函数
const debouncedHandleInput = debounce(handleInput, 300);

// 模拟事件触发
document.getElementById('inputField').addEventListener('input', debouncedHandleInput);

参考链接：