jquery animation callback - geri arama parametrelerine nasıl geçilir

Question

Çok boyutlu bir diziden jQuery animasyonu yapıyorum ve her yinelemenin geri çağrısında dizinin bir öğesini kullanmak istiyorum. Ancak her nasılsa, her zaman farklı elemanlar yerine dizinin son elemanı ile son bulurum.

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]); 
    }); 
} 

}); 

}); 

`

Güncel sonucu: İnek, İnek, İnek

İstenilen sonuç: Köpek, Kedi, İnek

İlgili dizi öğesinin geri aramada döndüğünden nasıl emin olabilirim?

Answer 1

Sorun, x geri çağırma tarafından değerlendirilen zamana göre değiştirilmiş olmasıdır. Bunun için ayrı bir kapatma oluşturmak gerekir:

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)); 
} 

ben açıklama burada z parametreyi yeniden adlandırdık, sen kullanan bir işlevi döndüren işleve argüman olarak x geçiyoruz Geçtiğinde x durumunu depolayan z değişkenli kapsam.

Answer 2

Javascript'te klasik hata. Bu deneyin: döngü yürütür gibi oluşturulan her animasyon geri arama işlevi için ayrı bir değişken var emin olur

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

.