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

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

你可以做这样的事情

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

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

2 个答案: