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

【问题标题】：How to setTimeout within an already timed function in javascript如何在javascript中已经定时的函数中设置超时
【发布时间】：2013-07-15 09:20:08
【问题描述】：

我正在努力展示一条本质上会自我否定的信息。 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 的情况下工作，但没有延迟。

我们将不胜感激。

【问题讨论】：

这不是 3000 秒，是 3000 毫秒，只有 3 秒。
是的，我明白了。那是一个错字。
别担心，只是检查一下。
我不明白确切的问题 - 它应该像这样正常工作，因为您可以在 Javascript 中使用嵌套函数。你能描述一下它现在不工作的方式吗？
听起来bar._isShowing = false; 放错地方了。你能告诉我们整个函数吗？

标签： javascript settimeout

【解决方案1】：

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

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

牢记这些目标：

//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

【讨论】：