0

问题

我正在尝试简化较长的 javascript 代码,但在识别回调时遇到了问题。

我有一个大型数组,其中包含要在页面上设置动画的元素

[selector, activate interval, hide after]:

things_to_move = [
        ['.ufo, .chefoven, .sushi', 9900, 2000],
        ['.hotdog,.pizzaman,.boyballon', 12090, 3600],
        (...)
]

基本上,目的是每 x 秒激活每个选择器,并在 x 秒后隐藏它们,如上面的示例所示。

当前代码

经过多次尝试,我最终得到了这个:

// Activate the element, and set timeout to hide it
var showFun = function(index1) {  
    $(things_to_move[index1][0]).addClass('move');      
    setTimeout( function(){hideFun(index1)},things_to_move[index1][2]);   
}
// Hide the element
var hideFun = function(index2) {   
     $(things_to_move[index2][0]).removeClass('move');  
} 

// Loop through all items and set the interval for each one
for(_A=0; _A < things_to_move.length; _A++) { 
    setInterval(function(){showFun(_A)}, things_to_move[_A][1]);    
}

但这当然行不通。每次调用 showFun 函数时,它都会在循环结束后获取 _A 的值,而不是设置 setInterval 的值。

问题

所以问题是,如何将唯一索引传递给 setInterval 回调,以便回调知道要使用哪个数组项?

最终解决方案

如果有人有兴趣,最终的解决方案:小提琴

4

1 回答 1

3

解决它的最直接方法是使用闭包。尝试这样的事情:

for(_A=0; _A < things_to_move.length; _A++) {
    setInterval((function(_innerA){
        return function(){ showFun(_innerA); };
    })(_A), things_to_move[_A][1]);
}
于 2013-11-14T11:13:49.373 回答