範圍與JavaScript函數

我想通過我到inputItems [i] .on所以我可以將它設置爲執行特定的任務（由createSelectedInputItem（i）定義），你如何將變量傳入函數（）{..operation here}？範圍與JavaScript函數

for(var i=0; i< 6; i++){ 
    console.log("setting mouse event for : " + i); 

    // Bring in all the input items 
    inputItems[i].on('click', function() { 

     console.log("i is still:" + i); 
     input.tween.reverse(); 
     console.log("pressed" + i); 
     createSelectedInputItem(i); 

     for(var j=0; j< 6; j++){ 
     inputItems[j].tween.reverse(); 
     } 
    }); 
    }

LOG

//當頁面被加載

setting mouse event for : 0 

setting mouse event for : 1 

setting mouse event for : 2 

setting mouse event for : 3 

setting mouse event for : 4 

setting mouse event for : 5

//當按下inputItems之一

i是仍然：6

pressed6

這甚至不假設前北京時間

來源

2013-10-30 Daryl Rodrigo

可能的重複：http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example –

你所面臨的問題是，關閉，這是JavaScript的作用域的輕微非直觀的方面。

考慮你有多少變量。變量i存在多少次？答案是「與定義i的範圍一樣多」。在這種情況下，這意味着只有一個變量i，它在整個代碼中都被引用。

你做一個循環與i：

for(var i=0; i< 6; i++){

後這個循環已完成（你做任何點擊其中前發生），i是6。它永遠不會再改變，它永遠不會引用任何其他數字。

所以單擊處理火災，這行代碼運行：

console.log("i is still:" + i);

i是相同的變量，因此這將是價值6。

解決方法是爲循環的每次迭代引入一個新變量。

for (var i = 0; i < 6; i++) { 
    (function (innerI) { // create a function with an argument called innerI 
     console.log("setting mouse event for : " + i); 

     // Bring in all the input items 
     inputItems[innerI].on('click', function() { 
      console.log("i is still:" + i); 
      console.log("innerI is: " + innerI); 
      input.tween.reverse(); 
      console.log("pressed" + innerI); 
      createSelectedInputItem(i); 

      for (var j = 0; j < 6; j++) { 
       inputItems[j].tween.reverse(); 
      } 
     }); 
    }(i)); // invoke the function with i as the argument 
}

在這段代碼中，我們創建了一個匿名函數。該函數採用一個參數innerI。然後我們立即調用該函數，並通過i作爲參數。這將創建一個新的範圍和一個新變量，因此在循環結束時發生i++時不會更改。

來源

2013-10-30 18:33:44 lonesomeday

啊這使得這麼多，事實上，沒有什麼可以改變innerI變量是是什麼讓它工作。感謝：D –

@DarylRodrigo請注意，我的代碼實際上與Ixe的代碼相同，除了mine調用新變量'innerI'而不是'i'。兩者都是有效的，但是我發現在嵌套作用域中有多個具有相同名稱的變量會讓人困惑。 – lonesomeday

inputItems[i].on('click', function() { 
    // By the time this runs, any variable outside its scope may change, 
    // which in this case is 'i' which runs in a loop. 
});

你應該通過包裝它像這樣捕捉i：

(function(i) { 
    inputItems[i].on('click', function() { 
     // Now i is an argument to the wrapping closure 
     console.log(i); 
    }); 
})(i);

來源

2013-10-30 18:26:02 lxe

範圍與JavaScript函數

回答

相關問題