0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【JavaScript】コールバック関数について

Posted at

まずはコールバックとは?

コールバックとは!? 関数の引数に別の関数を指定する処理をいいます。

Aという関数が実行のあと、引数で指定したBという関数を実行するということが可能になります。

例えば、サーバからデータを取得したあとに次の処理を実行したい場合によく使います。

サーバへのアクセスは時間がかかるので、処理を待たないで実行すると不具合の原因にもつながります。

コールバックの構文の書き方


function 関数名(別の関数名(コールバック)) {

	処理を記述する
	
	引数に指定した関数を実行
	callback();
}

通常の関数を記述する感覚で処理を実行します。
ここで、ミソなのは引数に指定しているのが関数なので処理の最後にその関数を実行することです。

コールバック関数の実行方法例

実際のプログラミングの方法を書いてみます。

コールバックの処理がわかりやすいように setTimeout() を記述してみます。


function test(callback) {

	setTimeout(function() {
		console.log("testのfunctionが実行されました");
		callback();
		},1000);
}

この例では、test() という関数を作って10秒の時間を費やす処理を記述します。
引数には callback と記述しています。

ここで大切なものは、処理の最後に引数で指定した関数を実行する ということです。

実行方法は?

では上記プログラムを実行する方法を記述します。

function callbackTest() {
	console.log("callbackTestが実行されました");
}

こちらは、簡単な文字列をコンソールログへ出力するだけの簡単な関数です。
そして、コールバックを使って処理を実行するためにはこのように記述します。

test(callbackTest);

実行すると

実行結果

testのfunctionが実行されました
callbackTestが実行されました

最初にしたtest() の引数に関数をしていることがわかります。」
test()は10秒 かかる処理を行っているので、calbackTest() 関数をコールバックして実行します。

実行結果を見ると順番に関数が実行されているのがわかります。

0
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?