在特定持续时间后显示通知 - toastr.js答案

【问题标题】：Show Notification after certain Duration - toastr.js在特定持续时间后显示通知 - toastr.js
【发布时间】：2015-01-07 20:43:09
【问题描述】：

我有一个需要向用户显示的消息列表，这些消息在 data.NotificationDtos 中的特定时间段后使用 Ajax 加载

问题是我必须一次显示一条消息一段时间，比如 10 秒，

目前它会同时显示所有通知。

所以我需要我的步骤是：

在 Ajax 请求 toastr 第一条消息之后 toastr.info(val.DetailedMessage, val.EventMessage);
然后在 Toastr 消息上方显示一段时间。
然后继续处理其他消息，直到全部完成。

但我想知道如何做到这一点。

function loadNotifications() {
        $.ajax({
            url: '@Url.Action("GetNotifications", "Users")',
            dataType: "json",
            success: function (data) {                   
                $.each(data.NotificationDtos, function (i, val) {
                    toastr.info(val.DetailedMessage, val.EventMessage);
                });

            }
        });
    }

【问题讨论】：

标签： javascript jquery toastr

【解决方案1】：

初步实现可以使用window.setTimeout：

var messages = ["Hello", "World", "Including", "Antartica"]; 

function showMessages(messages, interval){
    // Loop through messages
    for(var i = 0; i < messages.length; i++){
        // Create timer for each message
        window.setTimeout((function(){
            var message = messages[i];
            return function(){
                toastr.info(message);
            }
        })(), i*interval*1000);
    }
}

// Show the list of messages, separate them by 3 seconds apiece
showMessages(messages, 3);

概念证明：JSFiddle。

【讨论】：