超時會覆蓋數據（JS）

Question

我有一個循環，用不同的參數使用不同的超時間隔三次調用一個函數：

<script type="text/javascript"> 
    var myArray = []; 

    for (i=0; i<3; i++) { 
     myArray[i] = []; 
     myArray[i]['second'] = (1+i)*3000; 
     myArray[i]['valeur'] = i+i; 

     setTimeout(function() { 
      otherfunction(myArray[i]['valeur']); 
     }, myArray[i]['second']); 
    } 

    function otherfunction(data1) { 
     console.log(data1); 
    } 
</script> 

腳本正確調用otherfunction（），但有一個錯誤：

Uncaught TypeError: Cannot read property 'valeur' of undefined

我該如何解決這個問題。看起來像一個關於可變範圍的問題。

Answer 1

改變它想：

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

    myArray[i] = new Array(); 
    myArray[i]['second'] = (1+i)*3000; 
    myArray[i]['valeur'] = i+i; 


    var timeoutCallback = (function(valeur){ 
     return function(){ 
      otherfunction(valeur); 
     } 
    })(myArray[i]['valeur']); 

    setTimeout(timeoutCallback, myArray[i]['second']); 


} 

的此點使用JavaScript closures保持變量的當前值的範圍內，爲你喜歡的回調函數。

正如你所看到的，我們在這裏有兩個嵌套函數，第一個創建一個安全範圍，以保持當前值myArray[i]['valeur']，這完全取決於變量i，它在for循環中沒有固定值。

有關檢查這個問題更多的信息，這個擁有最有價值的答案永遠

How do JavaScript closures work?

Answer 2

這是因爲在超時功能

i 

變量已經是3，和你的數組長度是3，所以myArray [3]是未定義的。您需要確保傳遞給setTimeout的函數具有正確值的閉包。

這將工作：

var myArray = new Array(); 

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

    myArray[i] = new Array(); 
    myArray[i]['second'] = (1+i)*3000; 
    myArray[i]['valeur'] = i+i; 



    (function(val){ 
     setTimeout(function() 
     { 
      otherfunction(val); 
     },myArray[i]['second']); 
    })(myArray[i]['valeur']); 
} 


function otherfunction(data1) 
{ 
    console.log(data1); 
}