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

我正在使用flotchart插件，我试图知道用户在图表上何时何地盘旋，并从数据库中获取有关该图表值的更多信息。

例如，如果用户在“5月24日”之类的日期盘旋，那么将进行ajax调用，并且“5月24日”的所有数据将被附加到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(); } }); 

现在的问题是，无论何时我hover在任何日期，它都会立即发送多个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) ... });