非同期処理でanimate.cssを使う

Question

ビットコインのレートをAPIで取得し、ajax、setIntervalで1秒ごとに値を更新しています。

平均すると10秒に１回ほど値が変わるのですが、値が変わった時にanimate.cssのbounceクラスをaddclassし、バウンドさせたいです。

callback関数の呼び出される方の関数でifを使い、値が変わった瞬間、変数midと変数mid_delayがノットイコールになる瞬間にaddclassさせ、その後に変数midと変数mid_delayをイコールにれば良いと考えたのですが、うまくいきません。

　コンソールログでUncaught TypeError: callback is not a functionと出るので、コールバック自体上手くいってないみたいです。

どうすればうまくいくでしょうか。
全然違うコーディングでも良いので、教えてください。

var API_URL = "https://bitflyer.jp/"
    var API_PATH = "api/echo/price"
    var GET_URL = API_URL + API_PATH;
    var mid_delay = 0;

    var mid_sync = function(){
      mid_delay = mid
    };

    
    //価格表示用MID取得
    var GET_MID = function(callback) {$.getJSON(
      GET_URL, //リクエストURL
      null, //送信データ
      function(jsonData, status) {
        mid = jsonData['mid'];
        var elem = document.getElementById("value");
        elem.innerText = Math.round(mid); //#valueにmidを挿入
      })
    callback()
    };

    console.log(GET_MID);
          
    var add_bounce = function (){
            if (mid_delay != mid){
            $('#animated').addClass('bounce');  
            $('#animated').removeClass('bounce');   
            }
            mid_sync();
    };

    //1000ミリ秒で自動的に価格更新
    setInterval(GET_MID.bind(undefined, "add_bounce"),1000);

Comments

[m.ts10806]

ひとまずエラーメッセージの通りですが、javascriptって関数名に変数を利用できなかったように思います。　callback()　は実質何をさせたいのでしょうか？

Answer 1

コンソールログでUncaught TypeError: callback is not a functionと出るので、コールバック自体上手くいってないみたいです。

誤

var GET_MID = function(callback) {
	callback();
}

var add_bounce = function() {
	console.log('add_bounce');
}

setTimeout(GET_MID.bind(null, 'add_bounce'), 100)

コードを回答用に単純化してしまいましたが、上記は元のコードのつもりです。
このコードの場合、bindの第2引数に関数ではなく文字列を渡してしまっています。
その結果、callback()のところがadd_bounce()ではなく"add_bounce"()となり、callback is not a functionとなりコケます。

正

var GET_MID = function(callback) {
	callback();
}

var add_bounce = function() {
	console.log('add_bounce');
}

setTimeout(GET_MID.bind(null, add_bounce), 100)

なので、このように関数を渡す必要があります。

他にも期待通りの動きにならないであろう部分が確認出来ますが、
mid_delayとmidで何であるか、また、これらで何をしたいのかが、
いまいち、質問文からは分かりませんでしたので、ここから先の回答は具体的な回答は控えます。

もし、midがAPIから取得した前回の値で、mid_delayがAPIから取得した新しい値であり、それらの値が異なる場合にのみ、画面の一部を更新したいという話なのであれば、$.getJSONの第３引数に渡しているコールバック関数の中で、今そのコールバック関数の中でやっている処理も、また、add_bounce関数の中でやっている処理も入れてあげないと上手くいかないかと思います。

今はadd_bounce関数の中で行われる処理が$.getJSONの第３引数の中に含まれていないので、期待したタイミングで実行されていないかと思います。

一旦、DOM周りの操作を除外したシンプルなコードで期待した動作をするように修正してから、DOM周りの操作を追加するというステップを踏んだ方が前に進みやすいかと思いますので良かったら試してみてください。(GET_MIDの引数にコールバック関数を渡すことは必須ではないと思うので、その辺も検討してみてください）

Comments

[rutawaru]

説明不足ですいませんでした。
DOM周りを整理しましたら、できました。

[HayatoKamono]

解決したようで良かったです。それでは、質問を閉じてしまって下さい。

Answer 2

このページを見ていた方、説明不足ですいませんでした。

やりたいことは下記の画像のようなページでajax自動更新で、価格が変更したら、バウンドさせるという事でした。
![説明]

下記コードで自己解決しました。

まずコールバック関数に""がついていて、作動していませんでした。

その後getJSONで取得したデータを関数の外で取得するため、bind(this)を使いました。

原因が分からないのですが「this.elem.innerText = Math.round(this.mid); //#valueにmidを挿入」これがgetJSONの所にあると価格が変更してから、次のsetinterval（1.5秒後くらい）でバウンドになってしまったので、「$('.animated').addClass('bounce'); //bounceクラスを追加」と同じ所に移動させました。
そうしたら価格表示が変更したタイミングと同じタイミングでバウンドしました。

変数のスコープ、thisの使い方、コールバック関数などを学べたので、良かったです。

   var API_URL = "https://bitflyer.jp/"
    var API_PATH = "api/echo/price"
    var GET_URL = API_URL + API_PATH;

    //this.mid_delayとthis.midを同じ値にする関数
    var mid_sync = function(){
      this.mid_delay = this.mid
    };
    
    //価格表示用MID取得
    var GET_MID = function (callback) {$.getJSON(
      GET_URL, //リクエストURL
      null, //送信データ
      function(jsonData, status) {
        this.mid = jsonData['mid'];//jsondatamidをthis.midに代入
        this.elem = document.getElementById("value");
      }.bind(this))//getJSONで取得したmidのスコープを関数の外側にする
    $('.animated').removeClass('bounce');  
    callback()//GET_MIDのコールバックにadd_bounce関数を実行
    };



    //価格が変更したらbounceクラスを追加して、バウンド表示させる  
    var add_bounce = function (){
            if (this.mid_delay != this.mid){//this.mid_delayとthis.midが違う値であればバウンドさせる
            this.elem.innerText = Math.round(this.mid); //#valueにmidを挿入
            $('.animated').addClass('bounce');  //bounceクラスを追加
            mid_sync();//this.mid_delayとthis.midを同じ値にする
            }      
    };

    //1500ミリ秒で自動的に価格更新
    setInterval(GET_MID.bind(undefined, add_bounce),1500);

<html>
<body>
  <title>ビットコイン現在の価格（円）</title>
  <h1>ビットコイン現在の価格（円）</h1>
    <div class='animated' id="value"></div>
</body>
</html>