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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

Q&A

解決済

4回答

240閲覧

コールバックで3つ以上の関数が繋がらなくて困っています。

geek_y_tom

総合スコア16

JavaScript

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

0グッド

0クリップ

投稿2018/11/22 06:16

Javascriptで複数の関数を同期処理したくて、コールバックを使った簡単なテストをしています。

下記のテストは成功しました。
関数test1の値を元に関数test2で値を生成するというものです。

js

1 2 test1(test2); 3 4 5function test1(callback){ 6 var num1 = 10; 7 console.log("num1 = "+num1); 8 callback(num1); 9} 10 11function test2(num1,callback){ 12 var num2 = num1+10; 13 console.log("num2 = "+num2) 14 callback(num2) 15}
実行結果 num1 = 10 num2 = 20

次に
num1を元にnum2を生成したあと,num2を元にnum3を生成しようと考えたのですが実行に失敗してしまいます。

js

1 2 3 //ここで関数を実行。 4 test1(test2(test3)); 5 6 7 8function test1(callback){ 9 var num1 = 10; 10 console.log("num1 = "+num1); 11 callback(num1); 12} 13 14function test2(num1,callback){ 15 var num2 = num1+10; 16 console.log("num2 = "+num2) 17 callback(num2) 18} 19 20function test3(num2){ 21 var num3 = num2+10 22 console.log("num3 = "+num3) 23} 24
実行結果 num2 = function test3(num2){ var num3 = num2+10 console.log("num3 = "+num3) num1 = 10 TypeError: callback is not a function

関数を分けた状態で同期処理を実行したいです。
かれこれ3日ほどハマっており、ググってもなかなかでてきません。
どなたかご教示いただけると幸いです。

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

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

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

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

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

guest

回答4

0

与えている引数が正しいか確認しましょう。

内側でtest2(test3)となっていますが、このままtest2が呼ばれると、numtest3に、そしてcallbackundefinedになってしまいます。

投稿2018/11/22 06:30

maisumakun

総合スコア145121

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

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

0

ベストアンサー

せめてコウじゃないでしょうか?

javascript

1test1(test2,test3); 2 3function test1(callback1,callback2){ 4 var num1 = 10; 5 console.log("num1 = "+num1); 6 callback1(num1,callback2); 7} 8 9function test2(num1,callback2){ 10 var num2 = num1+10; 11 console.log("num2 = "+num2); 12 callback2(num2); 13} 14function test3(num2){ 15 var num3 = num2+20; 16 console.log("num3 = "+num3); 17} 18

追記

命題に近いかたちでコールバックをネストする場合、
内側から実行されていくので
4→3→2→1→5の順で実行されます
なのでtest1の変数をtest2に引き継ぐのは順番が逆ですね

javascript

1test1(test2(test3(test4(test5)))); 2function test1(callback){ 3 console.log(1); 4 callback(); 5} 6function test2(callback){ 7 console.log(2); 8 return callback; 9} 10function test3(callback){ 11 console.log(3); 12 return callback; 13} 14function test4(callback){ 15 console.log(4); 16 return callback; 17} 18function test5(){ 19 console.log(5); 20}

投稿2018/11/22 06:36

編集2018/11/22 06:56
yambejp

総合スコア114572

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

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

geek_y_tom

2018/11/26 00:35 編集

ありがとうございます! test1の値をtest2以降で扱おうとしたときに,callbackともう一つ新しく引数を追加してしまうと、途端に上手くいかなくなってしまい、、、 2つ並列で引数を用意するといいのですね????! ありがとうございます!!
guest

0

とりあえず動かしたいだけなのであれば

javascript

1test1(function(num) { test2(num, test3); });

投稿2018/11/22 06:40

monzy

総合スコア85

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

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

geek_y_tom

2018/11/26 00:31

動きました!(泣)
guest

0

どうしたいのかという点で、呼び出しのかたちを維持するには。

javascript

1t1(t2(t3)); 2function t1(func) { 3 console.log("call1"); 4 return 10 + func(); 5} 6function t2(func) { 7 console.log("call2"); 8 return () => 20 + func(); 9} 10function t3() { 11 console.log("call3"); 12 return 30; 13}

コメントに書いたやつ

javascript

1const arrs = [()=>(console.log(1)), ()=>(console.log(2)),]; 2for(let i = 0; i < arrs.length; i++) { 3 arrs[i](); 4}

投稿2018/11/22 06:50

編集2018/11/22 06:54
papinianus

総合スコア12705

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

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

papinianus

2018/11/22 06:52

関数を配列につっこんで、ループして実行していったら、「複数」を「同期」がもっとも分かりやすいのではないかな?
geek_y_tom

2018/11/26 00:34

こんな方法もあるのですね???? 参考にして組んでみます!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問