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

Posted 2023-05-09

【中文标题】以设定的时间间隔将 jQuery 添加到数组中的元素

【英文标题】：Add jQuery to elements in an array at set interval of time

【发布时间】：2012-12-16 00:07:37

【问题描述】：

我想在稍有不同的时间制作动画以清除项目列表，例如每隔 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() 无济于事。 谢谢。

【参考方案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。

【讨论】：

您的 JavaScript 看起来正确，但您的 CoffeeScript 不正确； (item) -> ... 只是定义了一个函数，但没有调用它。您可能想在 CoffeeScript 中使用 do：do (item) ->。 do的详情见this section底部。

@muistooshort 感谢您的澄清，我已经更新了我的答案。

看起来更好。 for-function 结构很常见，CoffeeScript 有专门针对这个用例的do。