setTimeout和同步

Question

拥有代码：

<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="script2.js"></script>

的script.js：

setTimeout(function(){
    console.log("first");
}, 15);

script2.js：

setTimeout(function(){
    console.log("second");
}, 10);

在运行时我得到了不同的结果。有一次输出是：

second
first

但另一次：

first
second

由于给定的时间延迟，它不应该始终处于“第二，第一”的顺序吗？

Answer 1

你有一个简单的竞争条件。

规范保证脚本文件按顺序运行。这意味着浏览器可以自由尝试同时下载文件，但即使script2.js在script.js之前加载，script.js也会先运行。

但是，如果script.js快速加载并在script2.js仍在从服务器下载时执行，则执行script2.js之前可能至少会传递5ms。如果发生这种情况，将首先执行script.js中的超时，输出将为first, second。

Answer 2

我有三种方法来解决你的问题。

1. 在第二个函数中调用第一个函数。

   function first(){
       second();
       setTimeout(function(){
           console.log("first");
       }, 10);
   }
   
   function second(){
       setTimeout(function(){
           console.log("second");
       }, 10);
   }
   

2. 只需为第一个功能提供更多间隔。

   function first(){
       setTimeout(function(){
           console.log("first");
       }, 11);
   }
   
   function second(){
       setTimeout(function(){
           console.log("second");
       }, 10);
   }
   

3. 使用标记。

   var flag = false; //global variable
   
   function first(){
       setTimeout(function(){
           if(flag){
               console.log("first");
           }else{
               first();
           }
       }, 10);
   }
   
   function second(){
       flag = true;
       setTimeout(function(){
           console.log("second");
       }, 10);
   }