以設定的時間間隔將jQuery添加到數組中的元素中

Question

我想要動畫以略微不同的時間清除項目列表，例如以20ms爲間隔。 （當您清除消息時，請考慮Android 4.2提醒屏幕）。

但是，我不知道如何addClass間隔時間在數組中的不同元素。我試過這個，但是這只是適用jQuery的最後一個元素：

for item in App.itemsController.content 
    jQuery('#box').delay(2000).queue (n) -> 
    selector = '.' + item.objectId 
    console.log selector 
    $(selector).addClass('animated fadeOutRightBig') 

我也試過setTimeout()和setInterval()無濟於事。 謝謝。

Answer 1

您需要使用閉包來保持對項目變量的引用。我不使用CoffeeScript，但在JavaScript中我會這樣做。

var box = jQuery('#box'); 
for (var i in App.itemsController.content) { 
    var item = App.itemsController.content[i]; 
    (function(item) { 
     box.delay(2000).queue(function() { 
      var selector = '.' + item.objectId; 
      $(selector).addClass('animated fadeOutRightBig'); 
     }); 
    }(item)); 
} 

也許這就是你如何在CoffeeScript中做到這一點？只是快速看一下語法。

for item in App.itemsController.content 
    do (item) -> 
    jQuery('#box').delay(2000).queue (n) -> 
     selector = '.' + item.objectId 
     console.log selector 
     $(selector).addClass('animated fadeOutRightBig') 

您還應該引用循環外的#box元素，否則您的程序必須在每次迭代中搜索DOM。