从setInterval看js的单线程执行

简单的例子

在学习js的过程中发现了一个有意思的事情

下面的代码可以每隔三秒在屏幕上插入当前时间

setInterval(function () {
    document.write("<h1>" + Date() + "</h1>");
}, 3000);

在最开始界面如下

过了几秒钟，界面如下

可见setInterval将我之前的界面进行覆盖了，然后之后执行的时候也并没有覆盖原来的位置，而是在下面继续打印后三秒的时间

经过查询资料，发现js是单线程，当界面载入的时候会先按顺序执行js代码，之后会按照先后顺序执行setInterval和setTimeout的代码，在我的代码中体现为两个过程，首先是顺序执行我除了setInterval与setTimeout类似延迟执行的函数后，执行了setInterval，这其实是两个过程，所以就有了两种页面加载的样式了。

 

在我将代码改成如下时

setInterval(function () {
    document.write("<h1>"