显示具有延迟的多个Noty通知

Question

我正在使用noty来显示使用“右上角”警报设置的通知。我对jquery是个新手，但对php和mysql的了解足以让我完成大部分我想做的事情。

我想做的是使用mySQL获取数据，看看是否需要向用户显示任何通知(完成)。然后在页面加载时显示通知，我也这样做了，尽管我相信有一种更优雅的方式来显示多个通知，而不是重复代码？

然后，我想为每个通知的出现设置一个延迟，比如1秒，这样它们就不会同时出现和消失。我已经研究过.delay()，但是如果对jQuery没有更多的了解，它对我来说几乎毫无用处。

我的代码：

$(document).ready(function() {
  var noty_id = noty({"text":"a message","layout":"topRight","type":"inormation","animateOpen":{"height":"toggle"},"animateClose":{"height":"toggle"},"speed":1000,"timeout":5000,"closeButton":false,"closeOnSelfClick":true,"closeOnSelfOver":false,"modal":false});
  var noty_id = noty({"text":"a message","layout":"topRight","type":"inormation","animateOpen":{"height":"toggle"},"animateClose":{"height":"toggle"},"speed":1000,"timeout":5000,"closeButton":false,"closeOnSelfClick":true,"closeOnSelfOver":false,"modal":false});
});

Answer 1

您可以只使用setTimeout()原生Javascript函数。这将在给定的超时时间(毫秒)后将操作排入队列。

$(document).ready(function() {
    var noty_id = noty({"text":"a message","layout":"topRight","type":"inormation","animateOpen":{"height":"toggle"},"animateClose":{"height":"toggle"},"speed":1000,"timeout":5000,"closeButton":false,"closeOnSelfClick":true,"closeOnSelfOver":false,"modal":false});
    setTimeout(function() {   var noty_id = noty({"text":"a message","layout":"topRight","type":"inormation","animateOpen":{"height":"toggle"},"animateClose":{"height":"toggle"},"speed":1000,"timeout":5000,"closeButton":false,"closeOnSelfClick":true,"closeOnSelfOver":false,"modal":false}); }, 5000)
});

您可能会发现jQuery Pines是将多个通知排入队列的更好的通知系统。