javascript - 如何避免或停止多个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 调用完成。