カスタムjQuery関数がランダムに定義されていません

Question

ご協力いただきありがとうございます。

私は一握りのグラフをレンダリングするページを持っていますが、私はしばらくの間スコープの問題を経験しているようです。

私は、渡されたオプションに基づいて特定のタイプのチャートをレンダリングするために作った一連のjQuery関数を持っています。それぞれにAJAX呼び出しが含まれています。チャートコンテナ。

一部のグラフは、最初のチャートAJAXコール応答のJSON応答によってオプションが決まる2番目のチャートとペアになっています。ペアになったチャートは、AJAX success：がトリガされた後の最初のチャートのコールバックにレンダリングされます。

ほとんどの場合、これは完全にうまく動作しますが、時には "TypeError：$（...）。lineChartが関数ではありません"というエラーが発生することがあります。最初のbarChartは毎回描画しますが、barChartと同じファイルで定義されているlineChart関数にはアクセスできなくなります。

私はコードに追加するすべての遅延は、問題を修正するようです。デバッガを使用すると問題は発生せず、タイムアウト後にエラーをキャッチしてlineChart関数を再呼び出しすることもできます。

なぜ機能が使用できなくなるのか、ランダムに見えるのはなぜですか？

正確なコードに貼り付けていないことをお詫び申し上げます。私がここに投稿できないコメントと変数/関数名がかなりあります。

ありがとうございました。

$.fn.barChart = function (options, callback) { 
    $.ajax(options["url"], { 
     method: "POST", 
     type: "json", 
     data: options.data, 
     success: function (response) { 

      // ..render this chart .. 

      var optionsForNewChart = {}; // ..generate new options to respond with base on response JSON 
      callback(optionsForNewChart); 
     } 
    }); 
}; 

$.fn.lineChart = function (options) { 
    $.ajax(options["url"], { 
     method: "POST", 
     type: "json", 
     data: options.data, 
     success: function (response) { 
      // ..render this chart .. 
     } 
    }); 
} 


$("#barChart1").barChart({ 
    url: "https://...", 
    data: { 
     //post data 
    } 
}, function (response) { 
    $('#lineChart1').lineChart(response); 
}); 

$("#barChart2").barChart({ 
    url: "https://...", 
    data: { 
     //post data 
    } 
}, function (response) { 
    $('#lineChart2').lineChart(response); 
}); 

$("#barChart3").barChart({ 
    url: "https://...", 
    data: { 
     //post data 
    } 
}, function (response) { 
    $('#lineChart3').lineChart(response); 
}); 

Answer 1

でコードを囲みます。これは、ロードされていないされている機能の問題を解決します $(document).ready(function(){ //YOUR CODE GOES HERE }); 。