在某段时间后显示通知 - toastr.js

时间:2015-01-07 20:43:09

标签: javascript jquery toastr

我有一个我需要向用户显示的消息列表,这些消息是在data.NotificationDtos

中的某段时间后使用Ajax加载的

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

目前它一次显示所有通知。

所以我需要我的步骤:

  1. 在Ajax请求toastr第一条消息后 toastr.info(val.DetailedMessage, val.EventMessage);

  2. 然后在Toastr消息上显示一段时间。

  3. 然后继续其他消息,直到完成所有消息。
  4. 但我到处练习如何做到这一点。

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

1 个答案:

答案 0 :(得分: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