javascript - 如何在延迟后在一个 div 中显示消息队列？

Question

如何实现延迟显示后元素的队列淡出并从数组中分离出来？这一功能应该提供消息在同一个 div 中一个接一个地显示，即使 showAlertBarMessages() 被调用很多次，就像在 FIFO 中一样。目前我无法清理显示的元素。我花了一天时间，我也不知道。

我当前的解决方案和工作示例:http://jsfiddle.net/ZtY38/ :

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

HTML:

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

相反，insertBefore应该append到#msg-sequentially，但这不起作用。或者这个解决方案还有其他完全不同的方法吗？

Answer 1

您可以尝试一下，看看它是否符合您的需求:

DEMO

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