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

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 完成(1 秒)等。

我尝试使用带有回调的 foreach 循环，但较快的任务会在较慢的任务之前运行，即使它们位于队列的末尾。这是一个 fiddle ，展示了它的实际效果。

https://jsfiddle.net/omp5cdm1/

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);
}

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

</div>

需要输出顺序:1000, 500, 300, 750

实际输出顺序:300、500、750、1000

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

Answer 1

您的“asyncFunc”实际上并不是异步的:它会立即为 someArray 中的每个项目调用，并且表现得像 sleep 排序。
此示例将等待超时，然后再调用数组中下一项的函数。

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>