Question

我知道以下代码：

function do_a(){
  // simulate a time consuming function
  setTimeout( function(){
    console.log( '`do_a`: this takes longer than `do_b`' );
  }, 1000 );
}

function do_b(){
  console.log( '`do_b`: this is supposed to come out after `do_a` but it comes out before `do_a`' );
}

do_a();
do_b();

结果

`do_b`: this is supposed to come out after `do_a` but it comes out before `do_a`
`do_a`: this takes longer than `do_b`

首先，我很想明白为什么 - javascript如何决定继续前进＆＃34;并首先执行更快的代码。

其次，为什么不能解决这个问题 - 也就是说为什么警告会在for循环完成之前发生？

 function doit(start,callback) {
    for (i = 0; i < 100000; i++) { 
        document.getElementById('edit-cut').innerHTML = "<div></div>";
    }
    callback(start);

 }

 var start = Date.now();
 doit(start,function(start){
        var end = Date.now();
        alert(end-start);
 });

谢谢。

Answer 1

首先，我很想明白为什么 - javascript如何决定继续前进＆＃34;并首先执行更快的代码。

它没有更快地执行＆＃34;＆＃34;代码第一。它按照告诉的顺序执行代码。

你运行do_a。你运行do_b。 JS事件循环查找要运行的下一个函数。没有一个。经过一秒钟后，超时结束，您传递给它的函数将被放入队列中运行。事件循环运行该函数。

为什么警告在for循环完成之前发生？

它没有。您通过更新显示来更新DOM会让您感到困惑。

重新绘制脚本实际上是一种功能。 for循环更新DOM。 for循环结束。然后警报运行。警报会阻止，直到用户单击该按钮。所有这些都是严格线性的。事件循环忙于运行JS。

一旦你的JS功能完成，浏览器将重新绘制屏幕并将更新DOM的结果放在显示屏上。

这就是为什么要在循环中更新DOM，就像通常使用requestAnimationFrame而不是for循环一样。

Answer 2

setTimeout()在指定时间后调用该函数。实际上JS继续执行b并在指定的时间后执行你的匿名函数。您的第一种方法不能模拟耗时的功能。相反，它配置解释器在1000毫秒后调用您的匿名函数（与其他代码异步）。

Javascript执行顺序和回调

2 个答案: