複数のajaxリクエストを回避または停止する方法

Question

私はflotchartプラグインを使用しています。ユーザーがグラフをいつどこで表示するのかを知り、そのグラフ値に関するデータベースからより多くの情報を取得しようとしていました。

たとえば、ユーザーが「24 May」のような日付に移動すると、ajaxコールが行われ、「24 May」のすべてのデータがdivに追加されます。

はここで今の問題は、私は、任意の日付にカーソルを移動するたびに、それはすぐに10-15要求のような複数のAjaxのリクエストを送信している私のコード

$("<div id='tooltip'></div>").css({ 
      position: "absolute", 
      display: "none", 
      border: "1px solid #fdd", 
      padding: "2px", 
      "background-color": "#fee", 
      opacity: 0.80 
}).appendTo("body"); 

$("#visitor-chart").on("plothover", function(event, pos, item) { 
    if (item) { 
    var x = item.datapoint[0].toFixed(2), 
     y = item.datapoint[1].toFixed(2); 
     if (typeof x !== 'undefined') { 
     $.get("/ajax/graph?param="+item.datapoint[0]).done(function(result){ 
      $("#graf").html(result); 
     }) 
     } 
     $("#tooltip").html(item.series.label + " of " + x + " = " + y) 
     .css({ 
      top: item.pageY + 5, 
      left: item.pageX + 5 
     }) 
     .fadeIn(200); 
    } else { 
    $("#tooltip").hide(); 
    } 
}); 

です。余分なajaxリクエストを避けるにはどうすればいいですか？

Answer 1

ajax呼び出しが発生したかどうかを確認するフラグを関数の先頭に追加することで、これを行うことができます。ここにいくつかのsudoコードがありますが、明らかにあなたの例でこの作業をする必要があります。

var isAjaxing = false 
$().on("click", function(){ 
    if(isAjaxing) return; 
    isAjaxing = true; 

    $.ajax(url, function(){ 
     isAjaxing = false; 
    }) 
}) 

これは、ajax呼び出しが完了するまで機能をロックアウトします。

Answer 2

this jQueryプラグインの使用をお勧めします。コードサンプルも含まれています。

あなたはこの

$("#visitor-chart").on("plothover", function(event, pos, item) { 
... 
    $.throttle(makeYourAjaxCallHere, 300) 
... 
});