Jquery：延迟淡出和清除队列不起作用？答案

【问题标题】：Jquery : delay fadeOut & clearQueue doesn't work?Jquery：延迟淡出和清除队列不起作用？
【发布时间】：2010-09-29 07:24:57
【问题描述】：

我不明白为什么这段代码不起作用：

function Messages(type,text) {
    console.log("In function Message");
    $("#message").clearQueue();
    console.log("clearQueue :"+$("#message").queue("fx").length+" effet in queue");

    if($("#message").length > 0 && $("#message").not(":visible").length == 1) {
         $("#message").slideDown("slow");
    }

    $("#message").queue(function(){
         $(this).delay(5000).fadeOut("slow");
         $(this).dequeue();
    });
    console.log("Adding  "+$("#message").queue("fx").length+" effet in queue");
 }

这是控制台日志：

 In function Message
 1346clearQueue :0 effet in queue
 1356Adding  2 effet in queue

但似乎 clearQueue 不起作用，因为我有这个：

消息出现，他在 5 秒后消失..

出现消息，4秒后我再次调用“消息”，1秒后#Message消失。

因此，如果多次调用 Message，则延迟不会改变，并且 #Message 在第一次调用后始终消失 5 秒..

【问题讨论】：

标签： jquery queue delay settimeout

【解决方案1】：

.delay() 是一个setTimeout() 包装器，因此清除队列根本不会对其产生任何影响（至少现在还没有，希望在未来的 jQuery 版本中有所改变）。设置延迟后，.dequeue() 完成时为called on the element。

如果你想清除这个，你需要自己存储超时，这是 jQuery 目前在内部不做的事情。自己做看起来像这样：

function Messages(type,text) {
    var msg = $("#message");
    //clear old timer
    clearTimeout(msg.data("timer"));
    //clear previous queue
    msg.clearQueue();

    if(msg.filter(":hidden").length == 1) msg.slideDown("slow");

    //set and store a new timer
    msg.data("timer", setTimeout(function() { msg.fadeOut("slow"); }, 5000));
}

【讨论】：