预Quantum版Firefox中JS setTimeout模拟及循环调用失效问题

一、先解决你的核心疑问：循环里的setTimeout为啥没按预期工作？ #

你碰到的真不是浏览器Bug，而是JavaScript单线程事件循环的特性在搞鬼！

先看你那段出问题的代码：

i = 0; 
while(i < 100) { 
  setTimeout(function(){ window.open("https://www.bbc.com","_self") }, 3000); 
  setTimeout(function(){ window.open("https://www.cnn.com","_self") }, 3000); 
  alert(i); 
  i++; 
}

这里有两个关键原因：

• 事件循环的阻塞特性：JavaScript是单线程的，while循环会霸占主线程，一直执行到结束。你在循环里调用的setTimeout并不会立刻执行，而是被扔进浏览器的「任务队列」里排队，必须等当前的while循环完全跑完，才会轮到队列里的定时器任务执行。
• 浏览器安全拦截+页面替换冲突：你的循环会在瞬间生成200个定时器（100次×2个），而且所有定时器的延迟都是3秒——等循环结束3秒后，这些任务会几乎同时触发。但window.open("_self")会直接替换当前页面，第一个触发的请求就会把页面换掉，后面的请求自然被中断；再加上浏览器会拦截频繁的弹窗/页面跳转请求（你注释里的"security mgr vetoed"就是这个原因），看起来就像定时器完全没工作。

而你单独测试的setTimeout(function(){ alert("Hello"); }, 3000);能正常运行，是因为这段代码没有阻塞主线程，定时器任务能在3秒后顺利进入执行栈。

二、题外话：如果真需要不依赖原生API模拟setTimeout #

虽然你后来发现原生setTimeout是正常的，但这个思路挺有探讨价值，这里给两种实现方案：

1. 同步轮询版（会阻塞主线程，慎用） #

这个方案完全基于时间检查，不依赖任何定时器API，但会卡死页面直到时间到，只能在极端场景下用：

function mySetTimeout(callback, delay) {
  const startTime = Date.now();
  // 空循环轮询，直到达到指定延迟
  while (Date.now() - startTime < delay) {}
  callback();
}

// 使用示例
mySetTimeout(() => {
  alert("模拟的setTimeout触发啦");
}, 3000);

2. 非阻塞版（基于requestAnimationFrame） #

这个方案利用浏览器的事件循环机制，不会阻塞主线程，体验更好：

function myNonBlockingSetTimeout(callback, delay) {
  const startTime = Date.now();
  
  function checkTime() {
    if (Date.now() - startTime >= delay) {
      callback();
    } else {
      // 在下一帧继续检查时间
      requestAnimationFrame(checkTime);
    }
  }
  
  requestAnimationFrame(checkTime);
}

// 使用示例
myNonBlockingSetTimeout(() => {
  alert("非阻塞的模拟setTimeout触发啦");
}, 3000);

内容的提问来源于stack exchange，提问作者nutty about natty