JavaScript 中 Promise 怎么在防抖函数中结合 Promise 实现异步返回结果-js教程-PHP中文网

防抖函数结合promise的核心是每次调用返回新promise并取消前次：用settimeout延迟执行原函数（须返回promise），新调用时清除定时器并reject旧promise，延迟后透传原函数的resolve/reject结果。

javascript 中 promise 怎么在防抖函数中结合 promise 实现异步返回结果

在防抖函数中结合 Promise，核心是让每次调用都返回一个 Promise，并确保只有最后一次触发的请求真正执行，前面的请求被取消或忽略。关键在于：不直接执行原函数，而是延迟执行并返回 Promise；当新调用到来时，拒绝（reject）或丢弃前一个 Promise 的结果。

用 Promise 封装防抖函数

标准防抖本身是同步的，要支持异步返回，需把原函数包装成返回 Promise 的形式，并在延迟执行时 resolve 或 reject 结果。

使用 setTimeout 延迟执行，执行时调用原函数（它应返回 Promise）
用一个变量（如 pending）保存当前待处理的 Promise 的 resolve/reject 函数
每次新调用前，先调用上一次的 reject（或忽略），避免旧结果“后发先至”
延迟结束后，调用原函数，将它的 Promise 结果透传给当前 resolve

基础实现示例

以下是一个带 Promise 支持的防抖函数（支持异步原函数）：

Alibabacloud Sdk Client Initialization For Java

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

下载

function debounceAsync(fn, delay) {
  let timeoutId = null;
  let pendingResolve = null;
  let pendingReject = null;

  return function(...args) {
    // 清除前一次定时器，并拒绝之前的 Promise
    if (timeoutId !== null) {
      clearTimeout(timeoutId);
      if (pendingReject) pendingReject(new Error('Debounced call canceled'));
    }

    return new Promise((resolve, reject) => {
      pendingResolve = resolve;
      pendingReject = reject;

      timeoutId = setTimeout(() => {
        timeoutId = null;
        pendingResolve = null;
        pendingReject = null;

        // 执行原函数（假设它返回 Promise）
        fn(...args)
          .then(result => resolve(result))
          .catch(err => reject(err));
      }, delay);
    });
  };
}

使用方式：

const asyncSearch = debounceAsync(fetchUser, 300);

asyncSearch('john').then(data => console.log(data));
asyncSearch('jane').then(data => console.log(data)); // 前一个会被取消，只执行最后一个