如何为JavaScript函数添加不终止原任务的超时提醒方法？

核心逻辑是让两个独立异步任务并行执行：原请求的Promise全程保持等待直到返回/报错，同时单独启动定时器，到指定时长后自动触发自定义提示操作，全程不会终止原请求的执行。

通用封装方法 #

你可以封装一个通用的工具函数，适配所有需要类似延迟触发逻辑的Promise场景：

/**
 * 为Promise添加延迟触发回调，不影响原Promise的执行和返回
 * @param {Promise} promise 原请求Promise
 * @param {number} delay 延迟触发时间，单位毫秒
 * @param {Function} callback 延迟到达后执行的自定义回调
 * @returns {Promise} 返回原Promise的执行结果，不改变原有调用逻辑
 */
function withDelayedCallback(promise, delay, callback) {
  // 启动定时器，到点触发回调，不受原Promise状态影响
  const timer = setTimeout(() => {
    callback();
  }, delay);

  // 可选：如果原Promise完成后不需要再触发回调，可以放开这段注释
  // promise.finally(() => {
  //   clearTimeout(timer);
  // });

  return promise;
}

socket.io emit 场景使用示例 #

针对你用到的socket.io带确认的emit请求，直接按原有逻辑调用，外层套封装方法即可：

// 示例：发起emit请求，10秒后弹出耗时过长提示，不终止请求
async function sendSocketRequest() {
  try {
    const result = await withDelayedCallback(
      // 你的原socket.io emit请求（v4+支持Promise写法）
      io.emit('your-event-name', { your: 'payload' }),
      10 * 1000, // 10秒延迟
      () => {
        // 自定义超时提示逻辑，比如修改页面状态展示提示文本
        console.log('当前操作耗时似乎比平时更长');
        // 如果你用UI组件库，也可以直接调用提示方法
        // Message.warning('当前操作耗时似乎比平时更长');
      }
    );
    // 请求成功后的原有逻辑不受影响
    console.log('请求返回结果：', result);
  } catch (err) {
    // 请求报错的原有逻辑不受影响
    console.error('请求失败：', err);
  }
}

注意事项 #

• 如果需要避免用户重复发起请求触发多次提示，可以添加请求锁变量，请求完成前禁止重复调用
• 如果是在单页应用的组件中使用，建议在组件卸载时清除未触发的定时器，避免内存泄漏
• 如果你不需要在请求正常返回后继续触发提示，放开上面工具函数中promise.finally的注释即可，原请求完成后会自动清除未触发的定时器

内容的提问来源于stack exchange，提问作者hipsterstomper69