javascript - 如何在javascript中已经定时的函数中设置超时

Question

我正在努力展示一条本质上是自我否定的信息。5 秒后，消息栏自行消失。但是，当显示多条消息时，一旦显示的消息栏被关闭，行为就是在同一个容器中显示多条消息。

为此，一旦我显示带有第一条消息的栏，这是 5 秒后自我关闭的代码

    window.setTimeout(function () {
    bar.getValue('isVisible').setValue(false);
    this.clearMessage(bar);// clears the message
    bar._isShowing = false;
        setTimeout(function() {
            //execute the last action in the queue (if any)
            dequeueAction(); fires the next message in queue.
        }, 100);
     }, 3000);

我的问题是，当在第一条消息自行关闭之前触发了另一条消息时，我正在排队。但是，我希望在关闭第一条消息和显示队列中的第二条消息之间有相当大的延迟。但是延迟显示第二条消息的超时不起作用，因为它已经在 3000 毫秒的时间内

我如何才能延迟关闭第一条消息并显示第二条消息？注意：它可以在没有第二个 setTimeout 的情况下工作，但没有延迟。

任何帮助将不胜感激。

Answer 1

我不是 100% 确定我理解你的问题。我认为你在说的是你想要：

1. 显示自我关闭的消息
2. 如果消息在显示时到达，则将其排队
3. 一旦当前消息自动消失，在显示下一条消息之前应该有一个短暂的停顿

考虑到这些目标：

//message queue
var msgqueue = Array();
//displaying flag
var msgdisplaying = null;

//clear message and hide box/bar
function clearMessage() {
    msgdisplaying = null;
    $('#msgbox').css('display','none');
}   

//queue message, start display if no message showing
function displayMessage(msg) {
    msgqueue.push(msg);
    if (msgdisplaying === null) showMessage();
}

//display message and set dismiss/delay timers
function showMessage() {
    if (msgqueue.length > 0) {
        $("#msgbox").html("<h1>" + msgqueue.shift() + "</h1>").css('display','block');
        //dismiss this message after 3 seconds
        setTimeout("clearMessage();",3000);
        //display next message (if any) 0.1 seconds after dismissing
        msgdisplaying = setTimeout("showMessage();", 3100);
    }          
}

jsfiddle

如果您打算使用 jQuery.animate函数来动画显示/隐藏消息 div，请使用回调参数设置下一个块的超时，以避免在动画期间触发超时

//show
$("#msgbox").html("<h1>" + msgqueue.shift() + "</h1>")
$("#msgbox").animate({ 'opacity': 1 }, 500, 'swing', function() { 
   msgdisplaying = setTimeout("dismissMessage();", 3000) 
 });

//hide
$("#msgbox").animate({ 'opacity': 0 }, 500, 'swing', function(){ 
   if (msgqueue.length > 0) 
      msgdisplaying = setTimeout("showMessage();", 1000) 
   } else { 
      msgdisplaying = null 
   });

jsfiddle