的setTimeout在for循環和範圍的決議問題

Question

可能重複：
How to Use setTimeout in a for…loop
calling setTimeout with a for loop

對於我來說，setTimeout功能不會在for循環工作。執行完循環語句後執行。

我正面臨着這個範圍問題的情況下在javascript中的setTimeout函數。

這裏是我的代碼片段..

... moves[] is an array .. 

for(i=0;i<noOfMoves;i++) { 

     playerName = moves[i].playerName; 
     timeDiff = moves[i].timeDiff; 
     console.log("Inside for loop"+ playerName); 

     setTimeout(function(){ 
      console.log("Inside set time out :"+playerName); 
     },timeDiff); 
.... 
.... 
} 

但它笨拙打印出下面的輸出...

Inside for loopplayer1 
Inside for loopplayer2 
Inside for loopplayer3 
Inside for loopplayer4 
.... (noOfMoeves times ..) 
Inside set time outplayer1 
Inside set time outplayer1 
Inside set time outplayer1 
Inside set time outplayer1 

編輯：的

我想O/P以下方式

我期待打印「Inside for loop」控制檯日誌首先，然後等待「timeDiff」期間，然後打印「Inside settimeout」功能控制檯日誌..我怎麼能做到這一點？ -

Inside for loopplayer1 
Inside set time outplayer1 // (after waiting for timeDiff time) 
Inside for loopplayer2 
Inside set time outplayer2 // (after waiting for timeDiff time) 
...... 
...... 

另外，playerName變量在每個settimeout控制檯日誌語句中獲得相同的值嗎？

Answer 1

這是因爲關閉。改變你的代碼是這樣的：

for(i=0;i<noOfMoves;i++) { 
    playerName = moves[i].playerName; 
    console.log("Inside for loop"+ playerName); 
    (function(name) { 
     setTimeout(function(){ 
      console.log("Inside set time out :"+name); 
     },timeDiff); 
    })(playerName); 
} 

您可以瞭解更多關於關閉here。

更新代碼：

var moves = [ 
    {playerName: '1'}, 
    {playerName: '2'}, 
    {playerName: '3'}, 
    {playerName: '4'} 
]; 
var timeDiff = 1000; 
var currentMove = 0; 

var processNextMove = function() { 
    var move = moves[currentMove]; 
    console.log('Inside for loop: ' + move.playerName); 
    currentMove++; 
    window.setTimeout(function() { 
     console.log('Inside set time out: ' + move.playerName); 
     if(currentMove != moves.length) { 
      processNextMove(); 
     } 
    }, timeDiff); 
}; 

processNextMove(); 

Answer 2

這並不完全是由於工廠倒閉，這是由於這樣的事實，JavaScript是單線程的，並設置超時將不會發生，直到JavaScript有空閒時間來執行。 for循環將始終在setTimeout執行代碼之前完成。

爲了解決這個問題，把一切都變成的setInterval像這樣：

var moves = [{playerName:'Test'},{playerName:'Terry'}, {playerName:'sdfsdf'}]; 
var currIdx = 0; 
var intervalId = window.setInterval(function() { 
    var playerName = moves[currIdx].playerName; 
    console.log("Inside for loop"+ playerName); 
    (function(name) { 
     setTimeout(function(){ 
      console.log("Inside set time out :"+name); 
     },0); 
    })(playerName); 
    currIdx++; 
    if(currIdx >= moves.length) 
     window.clearTimeout(intervalId);   
}, 10); 

請參閱搗鼓一個樣本 - http://jsfiddle.net/uTyVw/2/

Answer 3

它看起來像你想一步到下一個項目一旦迭代和延遲完成。這是一個可以幫助你的步進器。

// Generic stepper. On step will move to next item and 
// run custom stepping function. If at the end will return 0. 
function Stepper(stepfunc, items) { 
    this.items = items; 
    this.index = -1; 
    this.stepfunc = stepfunc; 
} 

Stepper.prototype.start = function() { 
    this.index = -1; 
    this.step(); 
} 

Stepper.prototype.step = function() { 
    this.index++; // move to the next item 

    // Stop when we reach the end. 
    if (this.items.length <= this.index) { 
     return 0; 
    } 

     /* Do something now. */ 
     var item = this.items[this.index]; 
     this.stepfunc(item); 

     return 1; 
} 

// Custom step function. 
function myStep(item) { 
    // Do this now. 
    console.log(item.n); 

    // Get a reference to the stepper. 
    var s = this; 

    // Do this later. 
    setTimeout(function(){ 
     console.log(item.n + ' after ' + item.t); 
     var status = s.step(); 
     console.log(status); 
    }, item.t); 
} 

var items = [{n: 'A', t: 500}, {n: 'B', t: 600}, {n: 'C', t: 1000}]; 
var s = new Stepper(myStep, items); 
s.start();