🐼
JavaScriptの同期処理と非同期処理について確認する
1.記事の目的
先日fetchについて調べる機会があったのですが、そもそもfetchの話によく出てくる同期処理&非同期処理について確認しておきたいなと思いました。
2.同期処理と非同期処理
1.同期処理
JavaScriptでは基本的に書いた順に上から処理が進んでいきます。
function sayHello(name){
console.log(`Hello! Myname is ${name}.`);
}
function whatYourName(){
console.log("What your name?");
}
sayHello("TARO");
whatYourName();
sayHello関数を処理実行後にwhatYourName関数が処理実行されています。
このような処理は同期処理と呼ばれているもので、同期処理ではコードを順番に処理していき、ひとつの処理が終わるまで次の処理は行いません。
JSは基本的には同期処理です。
2.非同期処理
関数の間に下記のような処理が挟まるとどうなるでしょうか？
function sayHello(name){
setTimeout(function(){
console.log(`Hello! Myname is ${name}.`);
}, 1000);// 処理の実行に1秒挟む
}
function whatYourName(){
console.log("What your name?");
}
sayHello("TARO");
whatYourName();
上記のコードを実行すると、whatYourName関数が実行された後に、sayHello関数が実行されたと思います。
setTimeout()はJSの非同期処理の関数の一種です。
非同期処理でもコードを順番に処理していきますが、ひとつの非同期処理が終わることは待たずに次の処理をはじめてしまいます。
ここでは
sayHello関数の処理を開始
→sayHello関数の処理終了と実行を待たずにwhatYourName関数の処理を開始し実行される
→sayHello関数の処理終了し実行される
という処理の流れになっています。
※setTimeout()について、詳しくは下記を参照してください
JSの非同期処理の関数としては上記のsetTimeout()やsetInterval(),fetch()などが挙げられれます。
非同期処理を同期処理にする方法がないと困るポイントが出てくると思います。
上記の例でも、sayHello関数の処理実行を待ってからwhatYourName関数を処理実行したいですね。
JSではPromiseやasync/awaitを使用してこの問題を解決します。
次回の「JavaScriptのPromiseについて確認する」で、まずPromiseについて紹介したいと思います。
（11/30 記事更新しました）
3.参考記事
Discussion