Question

我有一个将在Javascript中运行的任务队列，一些是ajax调用，一些是简单的dom更改，因此每个人所需的时间各不相同，但是他们需要按顺序运行并等待轮到他们。

例如，想象一下这需要发生：

Task 1: Takes 1s to complete
Task 2: Takes 0.5s to complete
Task 3: Takes 0.3s to complete
Task 4: Takes 0.75s to complete

任务2不应该运行，直到任务1完成（1s）等等。

我尝试过使用带回调的foreach循环，但更快的任务在慢速之前运行，即使它们位于队列的末尾。这是一个显示它在行动的小提琴。

https://jsfiddle.net/omp5cdm1/

＆＃13;

var someArray = [1000, 500, 300, 750];

someArray.forEach(function(item, i) {
    asyncFunc(item, function(item) {
       console.log(i)
    });
});


function asyncFunc( item, callback ) {
	setTimeout(function() { 
       document.getElementById("output").innerHTML += item + ', ';
       callback();
  }, item);
}

＆＃13;

Needed output: 1000, 500, 300, 750
<br>
<div id="output">Actual output: 

</div>

＆＃13;

需要的输出订单：1000,500,300,750

实际输出订单：300,500,750,1000

编辑：我也需要让它在IE10 +上工作，所以不能使用es6 :(

Answer 1

你的'asyncFunc'实际上并不是异步的：它会立即调用someArray中的每个项目，并且就像睡眠排序一样。
此示例将在调用数组中下一项的函数之前等待超时。

var arr = [1000, 500, 300, 750];

function next() {
  var item = arr.shift();
  if (typeof item === 'undefined') return;
  document.getElementById("output").innerHTML += item + ', ';
  asyncFunc(item, next);
}
function asyncFunc(item, callback) {
  setTimeout(callback, item);
}
next();

<div id="output"></div>

使循环运行异步代码，但顺序正确

1 个答案: