#はじめに
Udemyの【JS】ガチで学びたい人のためのJavaScriptメカニズムの講座の振り返りです。
前回の記事
#目的
- 非同期処理についての理解を深める
#本題
###1. タスクキューとコールスタック
タスクキューとは実行待ちの非同期処理の行列
→ 非同期処理の実行順を管理
キューの仕組みをFIFO（First in First out）「先入れ先出し」という
###2.コールバック関数と非同期処理
前提
// 関数a,bを用意
function a() {
setTimeout(function task1() {
console.log('task1 done');
});
console.log('fn a done');
}
function b() {
console.log('fn b done');
}
a();
b();
// それぞれfn a done, fn b done, task1 doneの順で出力される
関数ｂをtask1の後に実行されるようにする
// aの関数の引数に関数bを入れる
function a(b) {
setTimeout(function task1() {
console.log('task1 done');
// ここで実行することでtask1の後に関数bが実行される
b();
});
console.log('fn a done');
}
function b() {
console.log('fn b done');
}
// ブラウザ上でも順序が入れ替わっている
a(b);
// b();
###3.非同期処理のチェーン
複数の非同期処理をコールバック関数を用いて連続的に繋げて処理する
前提
// コールバック関数を1秒間後に待機したあと実行される関数を定義
function sleep(callback){
setTimeout(function() {
console.log("hello");
callback();
// helloが呼ばれた後にcallback関数が実行される
},1000)
}
sleep(function(){
console.log("callback done!");
})
// 1病後にhelloとcallback doneが出力される
上記の処理を複数つなげるとどうなるか
// 引数にvalを追加し、+1加算される形でコンソールで出力されるようにする
function sleep(callback,val){
setTimeout(function() {
console.log(val++);
// callbackの引数としてvalを渡す
callback(val);
},1000)
}
// callbackの引数として渡しているのでここにもvalを渡す
sleep(function(val){
console.log("callback done!");
// valは0と出力される
}, 0)
// sleepをさらにsleepの中で実行する
sleep(function(val){
sleep(function(val){
// このようにすることで1秒後に0, また1秒後に1と出力される
}, val)
}, 0)
sleep(function(val){
sleep(function(val){
sleep(function(val){
sleep(function(val){
sleep(function(val){
// 4まで出力される
}, val)
}, val)
}, val)
}, val)
}, 0)
しかし、上記のようにするとコードの可読性が下がるので、Promiseというオブジェクトを使用する。
今日はここまで！
#参考にさせて頂いた記事