for循環中的setTimeout，變量未更改

Question

我是JavaScript的初學者，並且我一直在設法弄清楚至少兩個小時。 如果有人可以向我解釋為什么會這樣，那就太好了！

function slowDouble(x, callback) {
    setTimeout(function() {
    callback(2 * x);
  }, 500);
}

function slowDoubleTenTimes(x, callback) {
    for (i = 0; i < 10; i++) {
        slowDouble(x, function(result) {
            x = result;
        });
    }

    callback(x);
}

slowDoubleTenTimes(3, function(result){
  console.log('The result of slowDoubleTenTimes is ' + result);
});

邏輯告訴我，在slowDoubleTenTimes ，在for循環中， x應該在變化。 並且每次在隨后的for循環迭代中再次調用slowDouble時， x都應該不同。 但是x仍然是3 ！ 實際上，在callback(x)得到的答案應該是3072 。 但是， x從3變為6 ，然后保持在6 。

關於JavaScript的某些事情我不知道會阻止結果更改？

另外，很奇怪的是，如果我將console.log("hi")放在for循環之后，控制台會在slowDouble運行之前打印出“ hi”。 不應該slowDouble在console.log("hi")之前運行嗎？ 還是關於setTimeout某些事情我沒有正確理解？

謝謝！

Answer 1

slowDouble不會阻止。 因此，“回調”立即被調用。

setTimeout說，“在500毫秒內運行此功能”。 但是，它不會阻塞，這意味着它在注冊為要在500毫秒內調用后繼續到下一行。

Answer 2

• JavaScript引擎只有一個線程，從而迫使異步事件排隊等待執行。

• 如果定時器被阻止立即執行，它將被延遲
  直到下一個可能的執行點（將比所需的延遲長）。

http://ejohn.org/blog/how-javascript-timers-work/

function slowDouble(x, callback) {
    setTimeout(function() {
    callback(2 * x);
  }, 500);
}

function slowDoubleTenTimes(x, callback) {
    for (i = 0; i < 10; i++) {
        slowDouble(x, function(result) {
            x = result;
        });
    }

    callback(x);  //This will get called before the callback from timeout
                  // in slowDouble's context is called. 
                  // console.log(3)

}

slowDoubleTenTimes(3, function(result){
  console.log('The result of slowDoubleTenTimes is ' + result);
});

Answer 3

您立即調用slowDoubleTenTimes與x的值3 ，其然后調用slowDouble 10倍，每個呼叫傳遞的值x為3 。 大約500毫秒后，將調用您的回調以更改x的值，並且由於已經調用了slowDouble的其他調用，因此更改x的值對這些調用無效。