为什么clearTimeout没有清除定时器？

Question

下面的代码监听用户的互联网连接离线/在线：

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);
};

我遇到的问题是，如果我离线，然后在线，但很快又重新离线，那么超时仍然会执行，并且我会收到“计时器已达到”日志。所有控制台日志都按预期执行，因此当我离线时 window.onoffline 正在执行，并且应该执行clearTimeout - 但事实并非如此。

您可以在这里尝试：https://jsfiddle.net/xhoku19m/

Answer 1

这与

window.onoffline

和

window.ononline

事件的行为有关，它们不稳定，尤其是当网络连接状态快速变化时。

解决此问题的一种方法是创建您自己的自定义机制；为此，您可以使用

navigator.onLine

代替。像这样的东西：

let timer;
let isOnline = navigator.onLine;

const onOnline = () => {
  if (!isOnline) {
    console.log('online!');
    timer = setTimeout(() => {
      console.log('timer reached');
    }, 3000);
  }
  isOnline = true;
};

const onOffline = () => {
  if (isOnline) {
    console.log('offline!');
    if (timer) {
      clearTimeout(timer);
      timer = null;
      console.log('clearing timeout');
    }
  }
  isOnline = false;
};

window.addEventListener('online', onOnline);
window.addEventListener('offline', onOffline);

当连接状态发生变化时，会调用相应的自定义事件处理程序。