javascript - 为什么 setTimeout 调用会产生不同的结果

Question

我有下一个代码

setTimeout(function() {
  setTimeout(function() {
    console.log('foo');
  }, 50);
}, 100);

setTimeout(function() {
  setTimeout(function() {
    console.log('baz');
  }, 100);
}, 50);

问题是输出是什么。但是在运行代码时，我在多次运行中得到了不同的结果——有时是 foo baz，有时是 baz foo。

所以有两个问题:

1) 为什么我有不同的结果？

2) 为什么有时我得到 baz foo ？

附言有代码片段，但使用代码片段我总是得到相同的结果附言如果它是特定于环境的——我使用 Chrome(和 FF)，但问题仍然存在附言可能的答案是关于使用 console.log，但是对于

var a = []; 
setTimeout(function() { 
     setTimeout(function() { 
       a.push('foo'); 
      }, 50); 
 }, 100); 
 setTimeout(function() { 
     setTimeout(function() { 
       a.push('baz'); 
     }, 100); 
  }, 50); 
 setTimeout(function() { console.log(a); }, 300);

它仍然是真实的

Answer 1

指定的超时时间是浏览器在执行函数之前应该等待的最短时间，而不是保证时间。如果浏览器在计时器关闭时忙于做其他事情，该功能将被延迟。

因此，当您将计时器安排为 50 毫秒时，它可能要到 53 毫秒后才会真正运行。然后它将在此之后设置另一个计时器 100 毫秒，即您开始后的 153 毫秒。同时，设置为 100 毫秒的计时器可以在 101 毫秒后运行，然后将其第二个计时器设置为 50 毫秒后，即一切开始后的 151 毫秒。在此示例中，它将打印 foo bar。

或者您可以得到不同的延迟，结果将是 bar foo。

如果您需要按特定顺序执行操作，您应该在单个函数中按顺序运行它们，或者从第一个函数的回调中调用第二个函数，或者以特定顺序使用 promises。依赖于 setTimeout 的精确毫秒计时是不可靠的。