setTimeout实现轮询遇间歇性网络连接崩溃的解决方法

你这段轮询逻辑在弱网/断网下崩溃，本质是三个问题没处理：

• 没有异常拦截：DOM查询返回null时直接调用.click()、点击触发的异步请求报错，都会抛出未捕获异常，打断JS执行线程，后续定时逻辑直接终止
• 固定延时盲触发：写死5秒触发一次，完全不管上一次提交有没有完成、有没有成功，弱网下请求会大量堆积，直接把逻辑冲垮
• 无网络状态感知：断网时还在持续触发无效提交，空耗资源还容易抛错

1. 先给核心操作加错误兜底，避免单次报错中断整个逻辑 #

所有DOM操作、提交操作都要包在异常捕获里，执行前先判断DOM元素是否存在，不要直接调方法：

function safeTriggerSubmit() {
  try {
    const submitBtn = document.querySelector("input[type='submit']");
    // 元素存在、且未被禁用时才触发点击
    if (submitBtn && !submitBtn.disabled) {
      submitBtn.click();
    }
  } catch (err) {
    console.warn('轮询触发提交失败，已跳过本次执行', err);
  }
}

2. 替换固定延时逻辑，改成「上一次执行完成后再调度下一次」 #

绝对不要用固定延时的setTimeout/setInterval硬触发，要等上一次提交流程（不管成功失败）走完，再安排下一次执行，同时加指数退避策略：失败时逐步拉长等待间隔，避免断网时高频发无效请求。
如果你的提交是异步请求（fetch/XMLHttpRequest），参考下面的实现：

let currentDelay = 5000; // 初始间隔5秒
const MAX_DELAY = 60000; // 失败后最长间隔1分钟
let pollTimer = null;

async function runSubmitTask() {
  const submitBtn = document.querySelector("input[type='submit']");
  if (!submitBtn) return;
  // 提交过程中禁用按钮，避免重复触发
  submitBtn.disabled = true;

  try {
    // 这里替换成你实际的提交请求逻辑
    const resp = await fetch('/your/submit/path', { method: 'POST' /* 你的请求配置 */ });
    if (!resp.ok) throw new Error(`请求返回状态异常：${resp.status}`);
    // 提交成功，重置间隔为初始值
    currentDelay = 5000;
  } catch (err) {
    console.warn('提交失败，将拉长下次重试间隔', err);
    // 失败时间隔翻倍，最长不超过设定的最大值
    currentDelay = Math.min(currentDelay * 2, MAX_DELAY);
  } finally {
    submitBtn.disabled = false;
    // 不管成功失败，调度下一次轮询
    scheduleNext();
  }
}

function scheduleNext() {
  clearTimeout(pollTimer);
  pollTimer = setTimeout(runSubmitTask, currentDelay);
}

// 启动轮询
scheduleNext();

3. 加网络状态监听，断网时暂停、联网恢复后自动重启 #

利用浏览器自带的网络状态事件，避免断网时空跑：

function stopPoll() {
  clearTimeout(pollTimer);
  pollTimer = null;
}

// 网络恢复时重启轮询
window.addEventListener('online', () => {
  currentDelay = 5000; // 重置间隔
  scheduleNext();
});
// 网络断开时暂停轮询
window.addEventListener('offline', stopPoll);

// 初始启动前先判断网络状态
if (navigator.onLine) {
  scheduleNext();
}

4. 加全局异常兜底，漏网的错误也不会打断轮询 #

就算有没考虑到的异常，也通过全局监听接住，避免线程中断：

// 捕获全局同步错误
window.addEventListener('error', (e) => {
  console.warn('捕获到全局异常，已拦截避免中断轮询', e.error);
  e.preventDefault();
});
// 捕获未处理的异步Promise异常
window.addEventListener('unhandledrejection', (e) => {
  console.warn('捕获到未处理的异步异常', e.reason);
  e.preventDefault();
});

• 不要用setInterval做轮询，它不会等上一次任务执行完成就持续往事件队列塞任务，弱网下必然出现请求堆积
• 可以加页面可见性判断，用户切走标签页时暂停轮询，切回来时再恢复，减少无效资源消耗：

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    stopPoll();
  } else {
    runSubmitTask();
  }
});

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