傳遞函數數組作爲參數

Question

這裏是我的代碼：

function test(e, f) { 
    for (var i = 0; i < e.length; i++) { 
     $('#clickme').append("<button id='op" + i + "'>" + e[i] + "</button>") 
     $('#op' + i).click(function() { 
      f[i](); 
     }) 
    } 
} 


$(function postPunk() { 
    var func1 = function() { 
     alert('1'); 
    } 
    var func2 = function() { 
     alert('2'); 
    } 
    var func3 = function() { 
     alert('3'); 
    } 
    test(['Option1', 'Option2', 'Option3'], [func1, func2, func3]); 
}) 

的點擊事件不會調用該函數。如果我在點擊事件中放置了一個警報測試，它會正常啓動。

任何想法爲什麼這不起作用？將函數數組作爲參數傳遞似乎是一個問題。有一個更好的方法嗎？

Answer 1

與此類型的其他問題一樣，i不斷變化。

相反，試試這個：

for(var i=0; i<e.length; i++) { 
    (function(i) { 
     // your code that depends on i not changing 
    })(i); 
} 

Answer 2

這似乎是經典的JavaScript的問題，他們都成爲了最後的值（或undefined因爲f[3]不存在），因爲這是的i後的值循環。

嘗試將函數引用直接傳遞給click處理函數。

function test(e, f) { 
    for (var i = 0; i < e.length; i++) { 
     $('#clickme').append("<button id='op" + i + "'>" + e[i] + "</button>") 
     $('#op' + i).click(f[i]) 
    } 
} 

或者，另一種解決方案是使一個函數返回一個函數。這將使其「關閉」i左右。

function test(e, f) { 
    var makeFunc = function(i) { 
     return function() { 
      f[i](); 
     } 
    }; 
    for (var i = 0; i < e.length; i++) { 
     $('#clickme').append("<button id='op" + i + "'>" + e[i] + "</button>") 
     $('#op' + i).click(makeFunc(i)) 
    } 
} 

Answer 3

在回調函數的代碼使用循環結束後的的i值，所以它指向陣列外部的索引。您需要在環路閉合，使得每次迭代都有自己的變量如：

function test(e, f) { 
    for (var i = 0; i < e.length; i++) { 
      $('#clickme').append("<button id='op" + i + "'>" + e[i] + "</button>"); 
    (function(i){ 
     $('#op' + i).click(function() { 
          f[i](); 
        }); 
    })(i); 
    } 
} 

Answer 4

以下是我得到它的工作：http://jsfiddle.net/fH2Dk/3/

function test(e, f){  
    for(var i = 0; i < e.length; i++) { 
     (function(i) { 
      $('#clickme').append("<button id='op" + i + "'>" + e[i] + "</button>"); 
      $('#op' + i).click(function(){ 
       f[i](); 
      }); 
     })(i);  
    } 
}