如何避免或停止多个ajax请求

Question

我正在使用flotchart插件，并且试图了解用户何时何地在图表上徘徊，并从数据库中获取有关该图表值的更多信息。

例如，如果用户将日期悬停在“ 5月24日”之类的日期，则将进行ajax调用，并将“ 5月24日”的所有数据附加到div上。

这是我的代码

$("<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请求，例如10-15个请求。 如何避免多余的ajax请求？

Answer 1

您可以通过在函数顶部添加一个标志来进行检查，以检查ajax调用是否已被触发。 这是一些sudo代码，显然您需要使用您的示例来完成此工作。

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

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

这将锁定功能，直到ajax调用完成。

Answer 2

我建议使用此 jQuery插件并限制您的请求。 它还包含代码示例。

你可以做这样的事情

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