jQuery : delay fadeOut & clearQueue doesn't work?

Question

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

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 秒。

Answer 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));
}