Question

我试图做一个烤面包机＆＃39;使用JS的通知系统但无法按预期运行。

每当有与用户相关的nodeJS或AJAX的更新时，我想显示一个通知框，如果同时有多个通知可能会嵌套，有点像facebook并且在生命5秒后被删除，独立目前正在运行的其他通知。

然而，只有最后一个通知会消失并被删除，其余旧通知将保持可见......我无法找到导致此问题的原因。

这是我的代码，它位于mielikki对象中。

    var mielikki = {
    notifHooks: [],
    toaster : {
    notifCount : 0,
    launch : function(ops) {
        message = '';
        delay = 5000;
        msgType = 'generic';
        if("message" in ops) {
            message = ops.message;
        }
        if("delay" in ops) {
            delay = ops.delay;
        }
        if("msgType" in ops) {
            msgType = ops.msgType;
        }
        this.notifCount += 1;
        $('#toaster_template').clone().attr('id','notification-'+this.notifCount).html(message).appendTo('#notifications');
        var target = $("#notification-"+this.notifCount);
        var test = setTimeout(function() {  target.fadeOut("slow",function() { target.remove(); })},5000);
        mielikki.notifHooks.push( test );
    }
}
}

div toaster_template是为每个新通知保留克隆的基础div。

从任何来源或控制台将执行以下操作：

 mielikki.toaster.launch({'message' : 'test'});

但同样，如果前一次同时运行2次以上，则只有最后/最新通知会按预期执行。

Answer 1

我没有看到任何错误，也许在其他地方取消超时（使用notifHooks数组），我认为这是一个范围问题但是没有办法将两个超时排队与您发布的功能共享元素，而不是您的问题的答案，但我做了这个测试只是为了确认您所做的没有错：

＆＃13;

function notification(message) {
  var notification = $('<div />').html(message);
  $(document.body).append(notification);
  
  setTimeout(function () {
    notification.fadeOut(500, function () { notification.remove() });
  }, 1000);
}

notification('hello');
notification('world');

setTimeout(function () {
  notification('1000ms');
}, 1000);

setTimeout(function () {
  notification('1500ms');
}, 1500);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

嵌套的setTimeouts运行一次

1 个答案: