jquery動畫回調 - 如何將參數傳遞給回調

Question

我從一個多維數組構建jquery動畫，並且在每次迭代的回調中，我想使用數組的一個元素。然而，不知何故，我總是以數組的最後一個元素而不是所有不同的元素結束。

HTML：

<div id="square" style="background-color: #33ff33; width: 100px; height: 100px; position: absolute; left: 100px;"></div>

的javascript：

$(document).ready(function() { 

// Array with Label, Left pixels and Animation Lenght (ms) 
LoopArr = new Array(
    new Array(['Dog', 50, 500]), 
    new Array(['Cat', 150, 5000]), 
    new Array(['Cow', 200, 1500]) 
); 

$('#square').click(function() { 

for (x in LoopArr) { 
    $("#square").animate({ left: LoopArr[x][0][1] }, LoopArr[x][0][2], function() { 
     alert (LoopArr[x][0][0]); 
    }); 
} 

}); 

}); 

`

當前的結果：牛，牛，牛

期望的結果：狗，貓，牛

如何確保相關數組元素在回調中返回？

Answer 1

問題是x在回調評估它時被修改。您需要創建一個單獨的關閉它：

for (x in LoopArr) { 
    $("#square").animate({ left: LoopArr[x][0][1] }, LoopArr[x][0][2], 
     (function (z) { 
     return function() { 
      alert (LoopArr[z][0][0]); 
     } 
    })(x)); 
} 

我已經改名爲參數z這裏澄清，你傳遞x作爲參數傳遞給函數，它返回一個函數，它利用了範圍爲z變量，它在傳遞時存儲x的狀態。

Answer 2

Javascript中的經典錯誤。試試這個：

for (x in LoopArr) { 
    (function(x) { 
     $("#square").animate({ left: LoopArr[x][0][1] }, LoopArr[x][0][2], function() { 
     alert (LoopArr[x][0][0]); 
     }); 
    })(x); 
} 

這可確保有一個爲作爲循環執行創建的每個動畫回調職能的變量。