More than 3 years have passed since last update.

第三回 JavaScriptの非同期処理とシングルスレッド

JavaScript

Last updated at 2020-08-11Posted at 2020-08-05

1 / 9

まずはサンプルコードから

以下の様な JavaScript index.js を実行します。

【処理 1】ミリ秒で終わる処理を setTimeout() で 5 秒後に発火
【処理 2】ミリ秒で終わる処理を setTimeout() で 0 秒後に発火
【処理 3】10 秒かかる同期処理を実行

/** 本スクリプトの実行開始時間　*/
const startTime = new Date().getTime()

/**
 * 本スクリプトを実行してからの経過秒数を取得する。
 *
 * @return {number} 経過秒数
 */
function getSeconds() {
  return (new Date().getTime() - startTime) / 1000
}

/**
 * 本スクリプトを実行してからの経過秒数を取得する（フォーマット済み版）。
 *
 * @return {number} 経過秒数
 */
function getSecondsFormatted() {
  return getSeconds().toFixed(6).padStart(10, ' ')
}

/**
 * 処理 1 (非同期, 5 秒後に発火).
 */
function func1() {
  console.log(`${getSecondsFormatted()} seconds --> 処理 1 (非同期, 5 秒後に発火)`)
}

/**
 * 処理 2 (非同期, 0 秒後に発火).
 */
function func2() {
  console.log(`${getSecondsFormatted()} seconds --> 処理 2 (非同期, 0 秒後に発火)`)
}

/**
 * 処理 3 (同期. 10 秒かかる).
 */
function func3() {
  while (getSeconds() < 10) {
    // consuming a single cpu for 10 seconds...
  }
  console.log(`${getSecondsFormatted()} seconds --> 処理 3 (同期, 10 秒かかる)`)
}


// メイン処理開始
console.log(`${getSecondsFormatted()} seconds --> index.js START`)

// 処理 1 (非同期, 5 秒後に発火)
setTimeout(func1, 5000)

// 処理 2 (非同期, 0 秒後に発火)
setTimeout(func2)

// 処理 3 (同期, 10 秒かかる)
func3()

console.log(`${getSecondsFormatted()} seconds --> index.js END`)

期待値？

なんとなく「こう動作するだろう...」という思うのは下記でしょう。

  0.000000 seconds --> index.js START
  0.000000 seconds --> 処理 2 (非同期, 0 秒後に発火)
  5.000000 seconds --> 処理 1 (非同期, 5 秒後に発火)
 10.000000 seconds --> 処理 3 (同期, 10 秒かかる)
 10.000000 seconds --> index.js END

実際は...

現実はこうです。何故でしょうか。

  0.175104 seconds --> index.js START
 10.000085 seconds --> 処理 3 (同期, 10 秒かかる)
 10.000210 seconds --> index.js END
 10.000955 seconds --> 処理 2 (非同期, 0 秒後に発火)
 10.001161 seconds --> 処理 1 (非同期, 5 秒後に発火)