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

我有一个任务队列将在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/

var someArray = [1000, 500, 300, 750]; 
 

 
someArray.forEach(function(item, i) { 
 
    asyncFunc(item, function(item) { 
 
     console.log(i) 
 
    }); 
 
}); 
 

 

 
function asyncFunc(item, callback) { 
 
\t 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 :(

来源

2017-08-03 Sometip

澄清，他们需要“以”运行的意义：做回调函数需要连续执行，或执行异步函数本身需要连续运行？ –

这些任务对dom进行了更改，并且它们都是相互关联的，因此需要以严格的顺序进行，所以想象第一个任务需要10s才能完成，这意味着下一个任务（数组中的第二个任务）不应运行，直到第一个完成（10s后），等等。我希望这更有意义！ – Sometip

使用setInterval来连续检查上一个任务是否完成，然后开始新任务 –

您的'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>

来源

2017-08-03 02:46:19

这也可能是一个好主意，也可以显示如何使用async.js中的async.series完成此操作 – slebetman

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

回答

相关问题