Javascript 如何处理延迟后在一个div中显示的消息队列？

如何实现队列中哪些元素在显示后延迟衰减并从阵列中分离出来？即使在FIFO中多次调用

showAlertBarMessages（）

时，此函数也应在同一个div中提供消息显示。现在我无法清理显示的元素。我花了一天时间，但我不知道

我当前的解决方案和工作示例：

var msgQueue=[]；
var i=1；
$（'#添加消息'）。单击（函数（）{
msgQueue.push（“消息编号”+i）；
showAlertBarMessages（）；
i++；
});
函数showAlertBarMessages（）{
msgQueue.map（函数（msg，idx）{
返回函数（）{
var el=$（''）.html（msg）.addClass（'msg'）.insertBefore（'msg顺序'）；
$（el）。单击（函数（）{
日志（“淡出并从队列中移除”）；
});
如果（idx>0）{
返回el.delay（2000）.fadeIn（500）.promise（）
}否则{
return el.fadeIn（500.promise）（）
}
};
}).减少（功能（当前，下一个）{
log（“alredy显示淡出并从队列中移除”）；
返回当前然后（下一步）；
}，$（）.promise（））；
}

HTML:

添加下一条消息

相反，

insertBefore

应该是

append

到

#msg，但这不起作用。
或者这个解决方案还有其他完全不同的方法吗？
您可以尝试一下，看看它是否适合您的需要：


函数showAlertBarMessages（）{
var msg=msgQueue[0]；
if（！$（'#msg sequencely'）.find（':visible'）.length）{
var el=$（''）.html（msg）.addClass（'msg'）.appendTo（'msg顺序'）；
el.fadeIn（500）.promise（）.done（函数（）{
$（this）.delay（2000）.fadeOut（）.promise（）.done（函数（）{
$（this.remove（）；
msgQueue.拼接（0,1）；
if（msgQueue.length）showAlertBarMessages（）；
});
});
}
}
您可以尝试一下，看看它是否适合您的需要：


函数showAlertBarMessages（）{
var msg=msgQueue[0]；
if（！$（'#msg sequencely'）.find（':visible'）.length）{
var el=$（''）.html（msg）.addClass（'msg'）.appendTo（'msg顺序'）；
el.fadeIn（500）.promise（）.done（函数（）{
$（this）.delay（2000）.fadeOut（）.promise（）.done（函数（）{
$（this.remove（）；
msgQueue.拼接（0,1）；
if（msgQueue.length）showAlertBarMessages（）；
});
});
}
}
您的问题看起来很有趣，但是“这个函数应该提供的功能是什么？”“即使在FIFO中多次调用showAlertBarMessages（）时，消息也会在同一个div中一个接一个地显示。现在我无法清理显示的元素。”意思是？？我读了3-4遍，但我不明白你想做什么。如果我的英语不正确，很抱歉。我将在一个div中显示消息，而不是在同一时间，而是一个接一个地显示消息，而不管消息编号如何。已经显示的信息应该在延迟和淡出后删除。计数器应该如何工作？当我按下按钮时，会发生哪些当前未发生的情况？按钮仅模拟向队列中添加新消息的函数，困难在于每次调用showAlertBarMessages（）函数时，即使未显示所有消息。您的问题看起来很有趣，但有什么作用“即使在FIFO中多次调用showAlertBarMessages（）时，此函数也应在同一个div中提供消息显示。现在我无法清理显示的元素。“是什么意思？？我读了3-4遍，但我不明白你想做什么。如果我的英语不正确，很抱歉。我将在一个div中显示消息，而不是在同一时间，而是一个接一个地显示消息，而不管消息编号如何。已经显示的信息应该在延迟和淡出后删除。计数器应该如何工作？当我按下按钮时，会发生哪些当前未发生的情况？按钮仅模拟向队列添加新消息的函数，困难在于每次调用showAlertBarMessages（）函数时，即使未显示所有消息。
var msgQueue = [];

var i = 1;
$('#add-msg').click(function () {
    msgQueue.push("Message number " + i);
    showAlertBarMessages();
    i++;
});

function showAlertBarMessages() {
    msgQueue.map(function (msg, idx) {
        return function () {
            var el = $('<div />').html(msg).addClass('msg').insertBefore('#msg-sequentially');
            $(el).click(function () {
                console.log("fadeOut and remove from queue");
            });
            if (idx > 0) {
                return el.delay(2000).fadeIn(500).promise()
            } else {
                return el.fadeIn(500).promise()
            }
        };
    }).reduce(function (cur, next) {
        console.log("alredy shown fadeOut and remove from queue");
        return cur.then(next);
    }, $().promise());
}

<div id="msg-sequentially"></div>
<button id="add-msg">Add next message</button>

function showAlertBarMessages() {
    var msg = msgQueue[0];
    if (!$('#msg-sequentially').find(':visible').length) {
         var el = $('<div />').html(msg).addClass('msg').appendTo('#msg-sequentially');
        el.fadeIn(500).promise().done(function () {
            $(this).delay(2000).fadeOut().promise().done(function () {
                $(this).remove();
                msgQueue.splice(0,1);
                if(msgQueue.length) showAlertBarMessages();
            });
        });
    }
}