非完全激活Document上执行setTimeout的行为与规范溯源

你测试代码中出现的「控制台输出定时器ID为0，但回调永远不执行」的现象，完全符合WHATWG HTML标准对setTimeout的调度规则，对应两个核心约束：

1. setTimeout的ID是同步执行阶段生成的返回值，和定时器是否能最终被调度无关。你拿到ID为0，只是因为这个iframe全局上下文是第一次调用定时器API，ID序列从0开始计数，不代表回调已经加入事件循环队列。
2. 当setTimeout绑定的全局对象是Window实例时，延迟时长的累计有前置条件：只有该Window关联的Document处于完全激活状态时，才会计时；如果Document始终不满足激活条件，计时永久暂停，回调永远不会执行。你在代码中先把iframe从DOM树移除，此时iframe关联的浏览上下文已经被销毁，Document永久处于非激活状态，之后再调用setTimeout创建的定时器，永远不会等到计时完成的时刻，回调自然不会触发。

不需要销毁iframe，只要构造Document已创建但未激活的中间状态就能稳定复现，步骤如下：

• 动态创建iframe元素，暂时不挂载到当前页面DOM树，此时iframe内部的Document处于未激活状态
• 拿到这个未挂载iframe的window对象，调用setTimeout设置固定延迟（比如1000ms）的回调，记录定时器创建的时间戳
• 等待远超设置延迟的时长（比如3000ms），会发现回调始终没有触发
• 到时间后把iframe挂载到页面DOM中，此时iframe的Document进入完全激活状态，才开始累计1000ms的延迟，计时满后回调才会执行

复现代码如下：

// 创建iframe但不挂载，Document未激活
const iframe = document.createElement('iframe');
const iframeWindow = iframe.contentWindow;
const createTime = Date.now();

// 未激活状态下创建定时器
iframeWindow.setTimeout(() => {
  console.log('回调触发，距定时器创建时长：', Date.now() - createTime);
  // 实际输出值会大于4000ms（3000ms等待挂载 + 1000ms延迟），证明挂载前完全没有计时
}, 1000);

// 等待3秒后再挂载iframe，触发Document激活
setTimeout(() => {
  document.body.append(iframe);
}, 3000);

可以通过同步属性判断+事件监听结合的方式，精准捕获激活时机：

• 同步校验：读取目标Document的两个属性即可判断当前状态：
  • 若document.defaultView为null，说明关联的Window上下文已经被销毁（比如iframe被移除），Document处于永久非激活状态
  • 若document.readyState值为complete，且defaultView存在，说明Document处于完全激活状态
• 异步监听时机：
  • 监听Document的readystatechange事件，当事件触发时检查readyState变为complete的时刻，就是普通页面Document进入完全激活状态的时刻
  • 对于动态创建的iframe，监听iframe元素本身的load事件即可，load事件触发时，iframe内部Document已经完成加载进入完全激活状态
  • 如果需要监测Document退出激活的时机（比如iframe被移除），可以用MutationObserver监听父文档的DOM树变化，检测对应iframe节点被删除的时刻即可。

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