Question

我试图理解javascript代码的阻塞性质。我理解javascript是单线程的。所以我们必须使用定时器和回调来实现某些功能。

在这种情况下，我有一个改变背景颜色的循环。在循环结束之前，它不会改变bg颜色。为什么？为什么浏览器只能更新文档颜色？

<script>

 $(document).ready(function(){
    console.log('hi')

    var x = 0;
    var color = 'red';

    while (x< 10000000) {
        x+= 15 ;
        document.body.style.background = color;
    }

});
</script>

Answer 1

问题是重启浏览器进程在循环结束前不会触发。此过程是负责将可见性更改应用于DOM的过程。您可以尝试在setTimeout函数中包装代码。它会延迟你的执行时间，但我认为它将重绘流程：

while (x< 10000000) {
  setTimeout(function() {
    x+= 15 ;
    document.body.style.background = color;
  }, 100);
}

Answer 2

Dom操作将被推送到堆栈并且应该在执行结束时开始拉动它，并且在你的情况下改变背景颜色是堆栈中的第一个Dom操作，所以一旦完成，改变背景颜色操作将被拉动并起作用。

为什么我的javascript在这个while循环中没有改变bg颜色？

2 个答案: