排队通知的模式？

Question

我创建了一个库，弹出一些Toast通知，我试图把限制在屏幕上的最大通知。

我设法想法提取到plunker（不介意的代码，它只是为了解决这个问题）。

我有一个函数来创建这些祝酒：

function createToast() { 
    var body = $document.find('body').eq(0); 

    var toast = {}; 
    toast.id = index++; 
    toast.el = angular.element('<div class="toast">Toast ' + toast.id + '</div>'); 
    toast.el = $compile(toast.el)($scope); 

    if (maxOpened && toasts.length >= maxOpened) { 
    remove(toasts[0].id); 
    } 

    toasts.push(toast); 
    $animate.enter(toast.el, body).then(function() { 
    $timeout(function() { 
     remove(toast.id); 
     }, 3000); 
    }); 
} 

基本上它创建了一个具有el一个新的对象，然后动画它在身上。请注意，如果达到了maxOpened，则会删除第一个。

function remove(id) { 
    var toast = findToast(id); 

    if (toast) { 
    $animate.leave(toast.el).then(function() { 
     var index = toasts.indexOf(toast); 
     toasts.splice(index, 1); 
    }); 
    } 

    function findToast(toastId) { 
    for (var i = 0; i < toasts.length; i++) { 
     if (toasts[i].id === id) { 
     return toasts[i]; 
     } 
    } 
    } 
} 

找到烤面包，动起假，然后删除它。

如果我这样做对他们有$间隔，让我们说600ms它的工作原理。

试一下：http://plnkr.co/edit/lDnT57FPadCt5Ir5wHuK?p=preview

如果你把它降低到类似100ms它开始打破，不仅忽略了最大，但也留下不会被删除一些孤儿祝酒。

所以我不知道这可能是一个很好的解决方案在这里。我最好的猜测是提供一个队列，所以一旦吐司被删除，我就开始排空它，但到目前为止，我没有做到。

Answer 1

的可能简单的解决办法是添加一个推迟到每一个面包，只有开始时的限制是没有或不再达到动画敬酒。

你开始通过增加递延，并立即解决它，如果还没有达到限制或限制可以忽略不计：

toast.slotOpen = $q.defer(); 

toasts.push(toast); 
if (maxOpened && toasts.length <= maxOpened || !maxOpened) { // i guess 0 or a falsy value means to ignore the limit 
    toast.slotOpen.resolve(); 
} 

你只启动动画，当插槽盖打开：

toast.slotOpen.promise.then(function() { 
    $animate.enter(toast.el, body).then(function() { 

的最后一件事做的是解决当后一个老面包已被删除一个新的插槽被打开推迟：

$animate.leave(toast.el).then(function() { 
    var index = toasts.indexOf(toast); 
    toasts.splice(index, 1); 
    if (maxOpened && toasts.length >= maxOpened) { 
    toasts[maxOpened - 1].slotOpen.resolve(); 
    } 

我调整了您的代码并创建了一个新的Plunker。