为何clearTimeout无法清除定时器？网络状态监听场景排查

问题复现 #

使用以下代码监听网络离线/在线状态时，若执行「离线→上线→快速离线」的操作，3秒后依然会输出timer reached日志，尽管onoffline事件已触发且调用了clearTimeout：

let timer;
window.onoffline = () => {
  console.log('offline!');
  console.log('clearing timeout');
  if (timer) {
    clearTimeout(timer);
  }
};

window.ononline = () => {
  console.log('online!');
  timer = setTimeout(() => {
    console.log('timer reached');
  }, 3000);
};

问题原因 #

核心问题在于定时器的创建与清除顺序可能出现冲突：

1. 快速切换状态时，浏览器可能重复触发ononline事件，导致多个定时器被创建，而onoffline仅清除最后一次赋值的定时器ID，旧的定时器仍在后台运行；
2. 未在定时器执行完毕后重置timer变量，可能导致后续清除操作引用无效的ID。

解决方案 #

修改代码，确保每次创建新定时器前先清除旧定时器，同时在清除定时器后重置变量，避免无效引用：

let timer;

window.onoffline = () => {
  console.log('offline!');
  console.log('clearing timeout');
  if (timer) {
    clearTimeout(timer);
    timer = null; // 清除后重置变量
  }
};

window.ononline = () => {
  console.log('online!');
  // 先清除可能存在的旧定时器
  if (timer) {
    clearTimeout(timer);
  }
  timer = setTimeout(() => {
    console.log('timer reached');
    timer = null; // 定时器执行后重置变量
  }, 3000);
};

说明 #

• 每次上线时先清除旧定时器，避免重复创建多个定时器；
• 清除定时器后重置timer为null，确保后续判断逻辑准确；
• 定时器执行完毕后也重置变量，防止变量持有已失效的定时器ID。

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