首页 > 怎么理解js的这个看起来同步,但是却是异步的demo

怎么理解js的这个看起来同步,但是却是异步的demo

http://jsfiddle.net/hidoos/SNBYV/259/embedded

html<style>
    #box {
        width: 100px;
        height: 100px;
        background-color: blue;
    }
</style>
<div id="box"></div>
jsvar box = document.getElementById('box');
box.style.backgroundColor = 'red';

var start = new Date;
while (new Date - start < 3000) {
    // wait 3 second...
};

box的初始颜色是blue,我以为按照顺序执行的话,不用等待3s就能直接修改box的颜色为red,而实际的情况则是要等待了3s才修改box的颜色。不是很明白为什么会这样。

为什么不直接执行dom操作,非要等while执行这个3s,才去执行dom操作呢?


while循环 3秒内busy wait,使浏览器一直在执行js从而阻止了浏览器渲染


var start = new Date;
while (new Date - start < 3000) {
    // 打开页面后,3秒都在做这里面的东西了
};

其实一打开页面,box 的 backgroundColor 已经变为red 了;
只是那段JS 影响了页面的渲染;
你把 while 那段代码去了,就知道了;

【热门文章】
【热门文章】