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

jquery .each loop to execute each array item with a delay between them

本文关键字：之间 延迟 数组 循环 each 执行 jquery      更新时间：2023-09-26

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

看看 https://jsfiddle.net/14cmgrLj/10/

  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 遍历它们中的每一个，但它们仍然一次触发。我怎样才能循环遍历数组的项目，每个项目之间都有延迟。

提前致谢

你可以使用 jQuery 的 .delay 函数来管理队列 jQuery：我可以在addClass（）和这样的之间调用delay（）吗？

或。。。

使用 IIFE 管理循环中每条消息的增量等待。

小提琴：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);
  });
}

如前所述，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>
好的，

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

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 = [];
  }

你写东西的方式是做一些奇怪的事情，所以我对你的解决方案进行了这种更改：

  • 使用从 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);
});
相关文章：