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

/** 本スクリプトの実行開始時間　*/
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 秒後に発火)