javascript - 以设定的时间间隔将 jQuery 添加到数组中的元素

Question

我想制作动画以在稍微不同的时间清除项目列表，例如以 20 毫秒的间隔。（当您清除消息时，想想 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

您需要使用闭包来保留对 item 变量的引用。我不使用 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。