JavaScriptでの同期処理と非同期処理【現役エンジニアが解説】

PROGRAM

今回は、JavaScriptでの同期処理と非同期処理について、それぞれの場合に分け、簡単に解説していきます。

同期処理

同期処理では、プログラムのコードを順番に処理していきます。

通常のコードは同期処理で実行され、一つの処理が終わるまで次の処理は実行されません。

したがって、タイマー等を使用したい場合には、同期処理ではなく非同期処理での実行が必要となります。

非同期処理

非同期処理では、同期処理と異なり、複数の処理を同時に実行することができます。

ただし、JavaScriptの非同期処理はほぼ全てメインスレッドで行われることには留意すべきです。

setTimeout(function() {
    console.log("非同期的な処理");
}, 10);
console.log("同期的な処理");

上記のコードでは、非同期処理のsetTimeout関数を使って、第二引数のミリ秒後に第一引数の関数を実行しています。

マルチスレッド化

最近のブラウザにはWeb Worker APIがあり、別スレッドで処理を実行できる場合があります。

// Workerを作成
var worker = new Worker('worker.js');

// 別スレッドより素数判定結果を受信
worker.addEventListener('message', function(e) {
    var isPrimeNumber = e.data;
    var result = isPrimeNumber ? '素数' : '非素数';
    console.log(result);
});

// 数値(メルセンヌ素数)を別スレッドに送信
worker.postMessage(2147483647);

別スレッドで処理を実行するには、上記のコードのようにメインスレッド側でWorkerオブジェクトを使います。

// 素数判定関数
function checkPrimeNumber(n) {
    for(var i=2;i<n;i++) {
        if((n%i) == 0) {
            return false;
        }
    }
    return true;
}

// メインスレッドより数値を受信
self.addEventListener('message', function(e) {
    var isPrimeNumber = checkPrimeNumber(e.data);
    self.postMessage(isPrimeNumber); // 素数判定結果をメインスレッドに送信
});

Workerのコンストラクターの引数にはjsファイルを指定し、jsファイルには上記のコードのように別スレッドで処理したい内容を書き、スレッド間ではmessageイベントによるメッセージの受信やpostMessageメソッドによるメッセージの送信を行うことで、相互にメッセージのやりとりができるマルチスレッド化が可能です。