jQuery 使用 delay() 和 $.each() 不工作答案

【问题标题】：jQuery using delay() with $.each() not workingjQuery 使用 delay() 和 $.each() 不工作
【发布时间】：2011-07-26 12:47:25
【问题描述】：

我有不同的班级，每个班级都有不同的背景。我正在尝试每 2 秒切换一次 div #elm 的背景。为什么以下每个索引之间没有延迟 2 秒。他们都同时进来。

var classes = ['class1', 'class2', 'class3'];
$.each(classes, function(index, val) {
    $('#elm').removeAttr('class').addClass(val).delay(2000*index);
});

http://jsfiddle.net/bLHqP/

【问题讨论】：

delay 用于效果队列，不适用于此

标签： jquery delay each

【解决方案1】：

编辑：

这行得通：

for (var i = 0; i < classes.length; i++) {
    setTimeout (    
        (function(index){
        return function(){
            $('#elm').removeAttr('class').addClass(classes[index]);
        };
        })(i), 2000*i);
}

【讨论】：

那行不通。无需在 each() 中发布自执行函数。检查我在问题中发布的 jsfiddle 示例。

【解决方案2】：

延迟方法不是只针对使用效果队列的事件，比如淡入淡出等吗？

【讨论】：

【解决方案3】：

delay() 仅适用于效果。

来自 jQuery delay() 文档

.delay() 方法最适合排队的jQuery之间的延迟效果。因为它是有限的——它例如，没有提供一种方法取消延迟——.delay() 不是替代 JavaScript 的原生 setTimeout 函数，可能更多适用于某些用例。

由于addClass() 不是效果，您可以包含一个fadeIn() 效果并使用addclass 作为回调函数。

var classes = ['class1', 'class2', 'class3'];
$.each(classes, function(index, ui) {
    $('body').removeAttr('class').delay(1000).fadeIn(function() {
        $(this).addClass(ui);
    });
});

在http://jsfiddle.net/8e3Rm/查看工作示例

【讨论】：