Question

请帮忙！我正在建立一个同时触发多个警报的警报系统，但实际上我希望它们一次出现一个，这样它看起来就像bash中的命令promt它是睡眠功能。

  function iterateThru (message, status) {
    var time = 500;
    $.each(alertsArray, function(index, item) {
    		
      	//setTimeout(function(){ fireAlerts(message, status); }, 1000);
        setTimeout(fireAlerts, 100, message, status);
				
        //remove
				setTimeout(removeAlert, 4000);
    });  
    // empty array
    alertsArray = [];
  }

我从我的网站上调用此功能。为了让它们逐个点火 - 每次使用我的函数时，对象都被添加到一个数组中，然后我使用.each用setTimeout遍历它们，但是它们仍然会一次性触发。如何循环遍历数组的项目，每个项目之间有延迟。

先谢谢

Answer 1

您可以使用jQuery的.delay函数来管理队列jQuery: Can I call delay() between addClass() and such?

或者...

对循环中的每条消息使用IIFE to manage the incremental wait。

小提琴：https://jsfiddle.net/14cmgrLj/11/

它需要更多的工作，因为如果你在第一组完成后点击创建警报按钮，但在它们被隐藏之前，时间就完全没了。

function fireAlerts(alerts) {      
  $.each(alerts, function(index, value) {
    // Use IIFE to multiply Wait x Index
    (function(index, value) {
      var wait = index * 1000 + 1000;
      setTimeout(function() {
        // Show Alert
        // [...]
        }
      }, wait);
    })(index, value);
  });
}

Answer 2

如前所述，setTimeout只是安排任务并立即返回。所以使用这样的东西：

<script>
var alertArray=[];
function showAlert(){
    var al = alertArray.shift();// removes and return first element
    if(al !== undefined){
        alert(al);
    }
    setTimeout(showAlert, 4000);
}
setTimeout(showAlert, 4000);
function addAlert(al){
    alertArray.push(al);//add new alert to the end
}
</script>

Answer 3

好的，所以我在你的代码中发现了问题。 setTimeout函数调用在给定时间之后写入函数内部的代码。但是异步，即它不会阻塞。因此，当您遍历每个元素时，函数被调用，这三个函数几乎同时被调用（您给它们提供了相同的超时）。你需要做的是定义一个新的变量（每条线出现的时间b / w）并在每次迭代中递增它。

function iterateThru (message, status) {
    var time = 0;
    $.each(alertsArray, function(index, item) {

        setTimeout(function(){ 
            fireAlerts(message, status); 
        }, time);
        time += 1000;

        //remove
        setTimeout(removeAlert, 4000);  //Change value of 4000 accordingly.
    });  
    // empty array
    alertsArray = [];
  }

Answer 4

你写东西的方式是做一些奇怪的事情，所以我改变了你的解决方案：

使用从jQuery Deferred
如果需要，可以向阵列添加警报（取消注释）
我将您的全局变为名为myApp的名称空间。

在此处试试：https://jsfiddle.net/MarkSchultheiss/14cmgrLj/14/

修改代码：

//create app or use one if exists
var myApp = myApp || {};
// add alerts data
myApp.alerts = {
  count: 0,
  alertDelay: 3000,
  defaultStatus: "1",
  alertsArray: []
};
myApp.func = {
  wait: function(ms) {
    var defer = $.Deferred();
    setTimeout(function() {
      defer.resolve();
    }, ms);
    return defer;
  },
  addAlert: function(message, status) {
    status = status || myApp.alerts.defaultStatus;
    myApp.alerts.count++; // counts how many have ran
    var alert = [message, status, myApp.alerts.count];
    // uncomment if you need keep track of them:
    // myApp.alerts.alertsArray.push(alert);
    myApp.func.fireAlert(alert, myApp.alerts.alertDelay);
  },
  fireAlert: function(item, delay, index) {
    $("#terminal").append("<span class='d" + item[2] + "'>" + item[0] + "</span><br />");
    myApp.func.wait(delay).then(function() {
      $("#terminal").find('.d' + item[2]).addClass('fadeOutDown');
    })
  }
};
//====== Trigger ======//
$("#trigger").click(function(event) {
  console.log("There have been " + myApp.alerts.count + " alerts ran");
  console.log(myApp.alerts.alertsArray);
  myApp.func.addAlert($('#field').val(), 2);
  myApp.func.addAlert($('#field').val(), 2);
  myApp.func.addAlert($('#field').val(), 2);
});

jquery .each循环执行每个数组项，并在它们之间有延迟

4 个答案: