ループを非同期コードで実行しても正しい順序で実行します。

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 

タスク1が（1S）完了するまでタスク2を実行してはならない、など

私は、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を使うことはできません:(

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>