Javascript：關閉循環？

Question

我喜歡做的事情大致如下：

for(var i = 0; i < 10; ++i) { 
    createButton(x, y, function() { alert("button " + i + " pressed"); } 
} 

的這個是，我總是得到的i終值，因爲Javasript的關閉是沒有價值的。
那麼我怎樣才能做到這一點與JavaScript？

Answer 1

for(var i = 0; i < 10; i++) { 
    (function(i) { 
     createButton(function() { alert("button " + i + " pressed"); }); 
    })(i); 
} 

注意的JSLint不喜歡這種模式。它會拋出「不要在循環中創建函數」。

現場演示：http://jsfiddle.net/simevidas/ZKeXX/

Answer 2

您需要將閉包放入單獨的函數中。

for(var dontUse = 0; dontUse < 10; ++dontUse) { 
    (function(i) { 
     createButton(x, y, function() { alert("button " + i + " pressed"); } 
    })(dontUse); 
} 

Thise代碼創建一個匿名函數，它i作爲用於循環的每次迭代的參數。
由於這個匿名函數爲每次迭代都有一個單獨的i參數，因此它解決了這個問題。

這相當於

function createIndexedButton(i) { 
    createButton(x, y, function() { alert("button " + i + " pressed"); } 
} 

for(var i = 0; i < 10; ++i) { 
    createIndexedButton(i); 
} 

Answer 3

for(var i = 0; i < 10; ++i) { 
    createButton(x, y, (function(n) { 
     return function() { 
      alert("button " + n + " pressed"); 
     } 
    }(i)); 
} 

在外面的匿名功能將自動調用並在其範圍內，在那裏，它利用每個i的然後當前值創建具有n一個新的閉合它被調用的時間。

Answer 4

通過執行另一個函數創建關閉一個新的範圍：

for(var i = 0; i < 10; ++i) { 
    createButton(x,y, function(value) { return function() { alert(...); }; }(i)); 
} 

http://www.mennovanslooten.nl/blog/post/62

Answer 5

一個解決方案，如果你的編碼爲使用JavaScript 1.7或更高版本瀏覽器，是使用let關鍵字：

for(var i = 0; i < 10; ++i) { 
    let index = i; 
    createButton(x, y, function() { alert("button " + index + " pressed"); } 
} 

從MDC文件中心：

let關鍵字導致項目 變量與塊0一起創建級別作用域，導致爲for循環的每次迭代 創建一個新的引用 。這意味着每個 閉包都會捕獲一個單獨的變量，從而解決共享環境造成的問題。

查看MDC Doc Center的傳統方法（創建另一個閉包）。