jQuery：我可以在 addClass() 等之间调用 delay() 吗？答案

【问题标题】：jQuery: Can I call delay() between addClass() and such?jQuery：我可以在 addClass() 等之间调用 delay() 吗？
【发布时间】：2010-03-24 17:46:28
【问题描述】：

一些简单的事情：

$("#div").addClass("error").delay(1000).removeClass("error");

似乎不起作用。最简单的选择是什么？

【问题讨论】：

想做同样的事情。打电话给$("#div").addClassTemporarily("error",1000)会很酷

标签： jquery delay

【解决方案1】：

您可以创建一个新的队列项来删除课程：

$("#div").addClass("error").delay(1000).queue(function(next){
    $(this).removeClass("error");
    next();
});

或者使用dequeue方法：

$("#div").addClass("error").delay(1000).queue(function(){
    $(this).removeClass("error").dequeue();
});

您需要调用next 或dequeue 的原因是让jQuery 知道您已经完成了这个排队的项目并且它应该继续进行下一个。

【讨论】：

我喜欢这个选项，因为它可以很容易地传递对队列函数中使用的 jquery 对象的引用，因此它可以在更通用的上下文中使用（没有硬编码的名称）。
为什么我们需要“下一个”？我们可以做 $("#div").addClass("error").delay(1000).queue(function(){ $(this).removeClass("error"); });看起来更优雅？
@Vennsoh 您不需要传递“下一个”队列项目。您可以选择使用 dequeue() 方法：api.jquery.com/dequeue

【解决方案2】：

AFAIK 延迟方法仅适用于数字 CSS 修改。

出于其他目的，JavaScript 带有一个 setTimeout 方法：

window.setTimeout(function(){$("#div").removeClass("error");}, 1000);

【讨论】：

+1：不要为了 Jquery 而使用 Jquery。许多问题都有简单的 javascript 解决方案。
+1：与第一条评论相同。简单的 JS 有时也可以正常工作。
+1 为简单起见，但也 +1'ed 接受的答案 - 因为它指出 .queue() 实际上传递了必须手动调用的延续对象（'next()' ）。我花了半个小时想知道为什么我的无参数回调链只执行第一个 - 其他网站上的许多示例使用链中的单个延迟和无参数回调，这有点误导该机制的过度简化
只是一个书呆子注意：setTimeout 来自浏览器的窗口对象（BOM）。 JavaScript（理解为 ECMA 脚本）没有这种方法。

【解决方案3】：

我知道这是一篇非常古老的帖子，但我已将一些答案合并到一个支持链接的 jQuery 包装函数中。希望它对某人有所帮助：

$.fn.queueAddClass = function(className) {
    this.queue('fx', function(next) {
        $(this).addClass(className);
        next();
    });
    return this;
};

这是一个 removeClass 包装器：

$.fn.queueRemoveClass = function(className) {
    this.queue('fx', function(next) {
        $(this).removeClass(className);
        next();
    });
    return this;
};

现在你可以做这样的事情了 - 等待 1 秒，添加 .error，等待 3 秒，删除 .error：

$('#div').delay(1000).queueAddClass('error').delay(2000).queueRemoveClass('error');

【讨论】：

非常有帮助！谢谢！

【解决方案4】：

jQuery 的 CSS 操作没有排队，但您可以通过以下方式使其在“fx”队列中执行：

$('#div').delay(1000).queue('fx', function() { $(this).removeClass('error'); });

与调用 setTimeout 完全一样，但使用的是 jQuery 的队列机制。

【讨论】：

这对我来说比接受的答案更好（如果课堂上有转换转换，则不会重复调用）。

【解决方案5】：

当然如果你像这样扩展 jQuery 会更简单：

$.fn.addClassDelay = function(className,delay) {
    var $addClassDelayElement = $(this), $addClassName = className;
    $addClassDelayElement.addClass($addClassName);
    setTimeout(function(){
        $addClassDelayElement.removeClass($addClassName);
    },delay);
};

之后你就可以像 addClass 一样使用这个函数了：

$('div').addClassDelay('clicked',1000);

【讨论】：

如果您想添加链接支持，请阅读有关插件创建的基础知识，或者只需将return this 添加到函数中...

【解决方案6】：

延迟对队列进行操作。据我所知，css操作（除了通过动画）没有排队。

【讨论】：

【解决方案7】：

delay 不适用于无队列函数，所以我们应该使用setTimeout()。

而且你不需要分开东西。您需要做的就是将所有内容包含在 setTimeOut 方法中：

setTimeout(function () {
    $("#div").addClass("error").delay(1000).removeClass("error");
}, 1000);

【讨论】：

您不必将 delay() 与 setTimeout() 一起使用。
@MattYao 我不认为你明白。如果您不使用 setTimeout，那么该延迟将不起作用
解决方案不需要两者一起工作。在 jQuery 中使用 delay() 和 queue() 或者简单地使用 setTimeout() 可以解决问题。我并不是说你的答案是错误的。

【解决方案8】：

试试这个：

function removeClassDelayed(jqObj, c, to) {    
    setTimeout(function() { jqObj.removeClass(c); }, to);
}
removeClassDelayed($("#div"), "error", 1000);

【讨论】：

【解决方案9】：

试试这个简单的箭头功能：

setTimeout( () => { $("#div").addClass("error") }, 900 );

【讨论】：

【解决方案10】：

另一种方式...

$("#div").addClass("error"); 
setTimeout(function () { $("#div").removeClass("error"); }, 1000);

【讨论】：

【解决方案11】：

$("#div").addClass("error").show(0).delay(1000).removeClass("error");

稍后谢谢我。

【讨论】：