JSの非同期関数とコールバック関数とは？この場合はコールバック関数って名前より、後処理関数って方が分かりやすいな…。

admin

4年前

参考URL
https://sbfl.net/blog/2019/02/08/javascript-callback-func/

いきなり結論
1, 非同期関数というものがある。実行しても完了を待たずに次の処理にいってしまう関数。setTimeout以外にも、$.ajax()とかfs.access(path[, mode], callback)みたいな奴。
2, 非同期関数が終わった後に、後処理的な事がしたい。その後処理関数がコールバック関数
3, 非同期関数の引数に、後処理関数(コールバック関数)を渡しておけば、あとは知らん！って感じでメイン処理ができる。

非同期処理のメリット
例えば時間のかかるダウンロード処理など、終わるまで待つ(同期処理)と画面が固まってしまうので、終わる前に次の処理もしたい！

1, 同期処理

// 頭から順番に処理されていく
console.log(1);
console.log(2);
console.log(3);

// 頭から順番に処理されていく

console.log(1);

console.log(2);

console.log(3);

1→2→3

2, 非同期処理(非同期関数setTimeout)

// 頭から順番に処理されていく
console.log(1);
// 0秒後に処理される。
setTimeout(function(){console.log(2)}, 0);
console.log(3);

// 頭から順番に処理されていく

console.log(1);

// 0秒後に処理される。

setTimeout(function(){console.log(2)}, 0);

console.log(3);

1→キューに登録処理→3→2(非同期処理が実行)

これは何が起こっているのか？

3, 関数自体を変数に格納できる。

function myfunc(a,b){
  return a+b;
}

// 関数を変数に格納する時は、最後にカッコを付けない。
// カッコをつけると、関数そのものが実行され、返り値が格納される。
const addFunc = myfunc;

// どっちも同じ関数をコールしている
console.log(myfunc(1,2), addFunc(1,2));

function myfunc(a,b){

return a+b;

}

// 関数を変数に格納する時は、最後にカッコを付けない。

// カッコをつけると、関数そのものが実行され、返り値が格納される。

const addFunc = myfunc;

// どっちも同じ関数をコールしている

console.log(myfunc(1,2), addFunc(1,2));

4, コールバック関数とは？

// もらった関数を二回実行する関数
function doTwiceWithValueFunc(func){
  // もらった関数の引数を、ここで指定して実行！
  func('hello');
  func('I am here');
}

// もらった関数を二回実行する関数に、引数の関数を渡す
doTwiceWithValueFunc(
  // 受け取ったメッセージをログ出力するだけの無名関数
  // ここでは定義するだけで実行しない、引数として渡す。これがコールバック関数
  function(message){ 
    console.log(message);
  }
);

// もらった関数を二回実行する関数

function doTwiceWithValueFunc(func){

// もらった関数の引数を、ここで指定して実行！

func('hello');

func('I am here');

}

// もらった関数を二回実行する関数に、引数の関数を渡す

doTwiceWithValueFunc(

// 受け取ったメッセージをログ出力するだけの無名関数

// ここでは定義するだけで実行しない、引数として渡す。これがコールバック関数

function(message){

console.log(message);

}

);

5, コールバック関数と非同期処理の関係

// Bye!→Hello!と表示されてしまう。出来れば非同期処理が終わった後の、後処理的なものを指定したい！
setTimeout(function() { console.log('Hello!');}, 2000);
console.log('Bye!');

// Bye!→Hello!と表示されてしまう。出来れば非同期処理が終わった後の、後処理的なものを指定したい！

setTimeout(function() { console.log('Hello!');}, 2000);

console.log('Bye!');

そのためには、非同期関数setTimeoutの引数にコールバック関数(後処理関数)を渡して、あとは知らん！って感じにすれば良い。

setTimeout(function() { 
	console.log('Hello!');
	console.log('Bye!');
}, 2000);

setTimeout(function() {

console.log('Hello!');

console.log('Bye!');

}, 2000);

6, 一般的な非同期処理＋コールバック関数

ボタンをクリックされた時の処理

document.getElementById('mybtn').addEventListener('click', 
  function(event) { // これがコールバック関数(登録だけして、今は実行しない！)
    console.log('clicked!');
  }
);

document.getElementById('mybtn').addEventListener('click',

function(event) { // これがコールバック関数(登録だけして、今は実行しない！)

console.log('clicked!');

}

);

分離して書くと、こういう感じ

// これがコールバック関数(登録だけして、今は実行しない！)
function　callback(event) { 
  console.log('clicked!');
}

// ボタンをクリックされた時の処理
// addEventListenerは非同期関数。
document.getElementById('mybtn').addEventListener('click', callback);

// これがコールバック関数(登録だけして、今は実行しない！)

function　callback(event) {

console.log('clicked!');

}

// ボタンをクリックされた時の処理

// addEventListenerは非同期関数。

document.getElementById('mybtn').addEventListener('click', callback);

関連記事