document.onreadystatechange函数为什么会被提前执行

发表时间：2022-06-01 17:38:17 阅读：44

console.time('onload')
console.time('onreadystatechange')
window.onload = ()=>{console.log('onload'); console.timeEnd('onload')}
document.onreadystatechange = ()=>{console.log('onreadystatechange');console.log(document.readyState);console.timeEnd('onreadystatechange')}

我在内联script里面写了上面的代码，为什么得到的结果是下面这个？

理论上应该先执行console.time('onreadystatechange')，但从结果来看，是先执行了onreadystatechange事件，并且document.readyState为'complete'，为什么该事件会被提前了？

🎖️ 优质答案

截图里怎么丢了之前的日志呢？

在document.readyState变为complete之前，还会经历其他状态。那时候就已经会触发onreadystatechange函数了。这个函数中使用了console.timeEnd('onreadystatechange')。一旦console.timeEnd被调用，那么这个记录对应的计时器就清除了。所以后续onreadystatechange函数再被调用时，因为没有重新开始设置onreadystatechange的计时器，就会有提示存在。
整个执行顺序和标准定义的一致，没有任何问题。

complete（完成）文档和所有子资源已完成加载。表示 load (en-US) 状态的事件即将被触发。

onreadystatechange先于load没毛病，console.time是标记（开启）一个计时器，打印是console.timeEnd

https://developer.mozilla.org...

已参与了 SegmentFault 思否社区 10 周年「问答」打卡，欢迎正在阅读的你也加入。