javascriptにおける同期処理と非同期処理 #JavaScript

ものすごく基本的な事として、同期処理と非同期処理の違いが理解できていないので、コードを書きながら、理解していきたいと思います。

はじめに

筆者は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ループに続く処理が実行されます。処理される順番は非常に大切なので、同期処理されるプログラムと非同期処理になるプログラムとを区別・理解してコードを書いていきたいですね！