JavaScript 防抖函数怎么实现当用户停止输入时才发送请求-js教程-PHP中文网

防抖函数的核心思路是每次触发时清除旧定时器并设置新延迟任务，确保仅最后一次输入停顿后执行回调；基本实现用settimeout与cleartimeout配合闭包保存timerid，进阶版支持立即执行和手动取消。

javascript 防抖函数怎么实现当用户停止输入时才发送请求

防抖函数的核心思路是：每次用户输入时，先清除上一次设定的定时器，再重新设置一个新的延迟执行任务；只有当用户停止输入超过指定时间后，才真正触发请求。

基本实现原理

利用 setTimeout 和 clearTimeout 配合闭包保存定时器 ID。每次触发函数时，先清掉旧的定时器（如果存在），再启动新的延时逻辑，确保只有最后一次输入后的等待期结束才会执行回调（比如发请求）。

简单可直接用的防抖函数

下面是一个通用、带取消能力的防抖实现：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

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

使用示例（配合搜索框）：

const searchInput = document.getElementById('search');
const fetchData = (keyword) => {
  console.log('发送请求:', keyword);
  // 这里写 fetch 或 axios 请求
};

const debouncedFetch = debounce(fetchData, 300);

searchInput.addEventListener('input', (e) => {
  debouncedFetch(e.target.value);
});

进阶：支持立即执行 + 取消功能

有些场景需要首次输入立刻执行（比如“搜索中…”提示），或中途能主动取消待执行任务。可扩展为：

function debounce(func, delay, immediate = false) {
  let timerId = null;

  const debounced = function(...args) {
    const callNow = immediate && !timerId;
    clearTimeout(timerId);

    timerId = setTimeout(() => {
      timerId = null;
      if (!immediate) {
        func.apply(this, args);
      }
    }, delay);

    if (callNow) {
      func.apply(this, args);
    }
  };

  debounced.cancel = () => {
    clearTimeout(timerId);
    timerId = null;
  };

  return debounced;
}

immediate: true → 第一次调用立即执行，后续触发需等停顿后再执行
debounced.cancel() → 手动取消尚未执行的延迟任务（例如页面卸载前清理）