Question

问题

我正在尝试简化一个很长的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回调，以便回调知道要使用哪个数组项？

最终解决方案

如果有人有兴趣，最终解决方案： Fiddle

Answer 1

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

for(_A=0; _A < things_to_move.length; _A++) {
    setInterval((function(_innerA){
        return function(){ showFun(_innerA); };
    })(_A), things_to_move[_A][1]);
}

Javascript - 将索引传递给setInterval回调

1 个答案: