以设定的时间间隔将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。