Tech Boyaki

非同期処理って何？😑に5分で答える

December 12th, 2020

そもそも同期とは、コンピュータ関係ではプロセスなどといった複数のエージェントの動作について、時系列的にタイミングを合わせる制御

今回の要件

1~10まで数字を表示する。

3の倍数の時だけ3秒待ってアホになります。

同期的な処理(Ruby)

Rubyなら上から順番に実行されていきます。 なのでターミナルで順番に表示されました。

# アホになる関数
def wait_three_second(num)
  sleep(3) # 3秒待ってくれます。
  "🤪 #{num} !"
end

puts 1
puts 2
puts wait_three_second(3)
puts 4
puts 5
puts wait_three_second(6)
puts 7
puts 8
puts wait_three_second(9)
puts 10

出力結果

1
2
🤪 3 !
4
5
🤪 6 !
7
8
🤪 9 !
10

非同期的な処理(JavaScript)

JSは同期的ではなくて、非同期的な処理をします。 即座に全ての関数が実行されて、３秒後に 3, 6, 9が表示されます。

function waitThreeSecond(num) {
  setTimeout(
    function() { console.log(`🤪 ${num}`); },
    '3000'
  );
}

console.log('1');
console.log('2');
waitThreeSecond('3');
console.log('4');
console.log('5');
waitThreeSecond('6');
console.log('7');
console.log('8');
waitThreeSecond('9');
console.log('10');

出力結果

1
2
4
5
7
8
10
🤪 3
🤪 6
🤪 9

これがJSの非同期的(asynchronous)な処理です。

関数を上から全て実行している点はRubyの同期的な処理と同じですが、 関数の出力結果を待たずに、次の関数が実行されているのがポイントです。

ちなみに。。。JSで同期的な処理をしたいときは

Promise(今回はasync/await構文を使ってみた)で実現できます。

function stopThreeSecond(num) {
  return new Promise((resolve, reject) => {
    setTimeout(
      () => resolve(console.log(`🤪${num}`)),
      3000
    )
  })
}

async function showNubmers() {
  console.log('1')
  console.log('2')
  await stopThreeSecond('3')
  console.log('4')
  console.log('5')
  await stopThreeSecond('6')
  console.log('7')
  console.log('8')
  await stopThreeSecond('9')
  console.log('10')
}

showNubmers()

出力結果

1
2
🤪3
4
5
🤪6
7
8
🤪9
10

Photo by Aral Tasher on Unsplash