質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
コールバック

コールバックは他のコードに引数として渡されるコードのことを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

2323閲覧

コールバック関数の引数のnullについて

aae_11

総合スコア178

コールバック

コールバックは他のコードに引数として渡されるコードのことを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/08/13 06:18

Qiitaにて、コールバック関数について調べていたのですが、下記のコードについて疑問な点があり、ご助言頂きたいです。

/* --- 変数・関数定義 --- */ var $div = $('#js-div'); var a = function(callback) { setTimeout(function() { $div.addClass('is-right'); callback(); }, 500); }; var b = function(callback) { setTimeout(function() { $div.addClass('is-top'); callback(); }, 500); }; var c = function(callback) { setTimeout(function() { $div.addClass('is-red'); callback(); }, 500); }; var end = function() { setTimeout(function() { $div.addClass('is-hide'); }, 500); }; /* 呼び出し */ a(b.bind(null, c.bind(null, end.bind(null))));

2点あるのですが、まず関数の実行順序としてはa()が呼び出され500ミリ秒後のb()、その500ミリ秒後にc(),500ミリ秒後にend()といった形でまずa()が実行され「$div.addClass('is-right');」が呼び出され、callback()が実行され、b()が実行されていくといった形で上から順に実行されていくのでしょうか?
また、呼び出しの部分で、「null」を記載しているのですが、a()の中にb()といった形で関数を引数にとっているにも関わらず、別途nullを引数にしてしなければならないのはなぜなのでしょうか?
上記2点につきまして、アドバイス頂けましたら幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

oikashinoa

2019/08/13 07:08

1点目は実験すれば解ると思います。$div.addClassの代わりにconsole.log()など仕込めば実行順を確かめれます。
guest

回答1

0

  1. yes

  2. bindの第一引数はthis。thisは不要だからnullを指定している。bindをわざわざ使っているのは、例えばcにcallbackの引数としてendを渡した状態の関数オブジェクトを得たいから。

投稿2019/08/13 08:21

papinianus

総合スコア12705

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

aae_11

2019/08/13 08:41

ご回答ありがとうございます。 いまいちイメージが掴めない部分があるのですが、「endを渡した状態の関数オブジェクト」とは何をさしているのでしょうか...?
papinianus

2019/08/13 09:23

上から順に実行したいことが前提です。 例えばbのcalllback()には引数書いてないですよね? 一方でcは引数としてcallbackをもらう必要があるので、c(end)を実行しないといけません。 なので普通にやろうとすると、bではcallback(param)とすることになり、bは2つの引数をとるし、それを受けるaはさらに引数が増えます。 この実装がだめなのは引数が増えることではなく、あらかじめチェーンできる個数が限定されることです。 これを回避するには、callback()とするだけで、c(end)実行してくれる、cExtendedの関数がほしいです。しかもそれをcから作り出したいです。 それが、bindの機能でc.bind(thisarg,引数)とすると、cの定義からcExtendedを作ってくれます。 ダラダラ書いたけど伝わる気がしないので、諦めてそのQiitaのPromiseのほうよんでください。
aae_11

2019/08/13 09:32

分かりました。自分もまだまだ勉強不足を実感しますし、promiseの方を読んでいきたいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問