ものすごく基本的な事として、同期処理と非同期処理の違いが理解できていないので、コードを書きながら、理解していきたいと思います。
はじめに
筆者はjavascriptの基本的な事を理解していない人間です。勉強のために書いていますので、間違いや、このサイト見なさい、などありましたらコメントいただけると非常にありがたいです。
同期処理
javascriptは上から順番にプログラムが実行されていきます。forループに入った場合もループ内の処理を順番に実行し、ループが終了後にforループの続きのプログラムが実行されます。
forで何回もループさせる処理
for (i=0; i<30000; i++) {
console.log(i);
}
console.log('------------');
この場合、forループの処理が全て完了してから------------
が表示されます。
Consoleでの表示
1
2
3
4
.
.
.
29997
29998
29999
------------
Array.prototype.map()
なども同期処理となります。
非同期処理
上記forループ内で使用したconsole.log
もfor
も同期処理のプログラムですが、非同期処理になるプログラムもあります。
非同期処理があるforループ
for (i=0; i<3; i++) {
setTimeout(function(){
console.log(i);
},1);
}
console.log('------------');
setTimeout
によって0.001秒後に変数i
の値をconsole.log
で表示します。これが非同期処理です。
Consoleでの表示
------------
10
10
10
ajax
なども非同期処理として扱う事が多いかと思います。
まとめ
forループ内で、非同期の処理を書かなければ、forループ内の処理が実行されてから、forループに続く処理が実行されます。処理される順番は非常に大切なので、同期処理されるプログラムと非同期処理になるプログラムとを区別・理解してコードを書いていきたいですね!