jquery - 如何在 JQuery.hover() 上仅进行一次 AJAX 调用？

Question

我想当用户将鼠标悬停在 div 上时在 div 中显示 AJAX 调用的结果(即将 div 内容替换为 AJAX 调用的结果)。基本功能是当用户将鼠标悬停在该点上时，将页面上的点替换为包含来自服务器的内容的圆圈，并在用户停止悬停时再次显示该点。页面上可能有很多点，每个点悬停时都有不同的圆圈内容。

我可以正常工作，但我注意到当用户将鼠标悬停在给定的 div 上时，AJAX 调用会被重复调用。如何防止重复调用？

我尝试了 .one 和 .unbind('mouseenter', 'mouseleave') 的各种用法，但尚未使其正常工作。

这就是我现在所拥有的(悬停行为适合用户，但会导致重复调用后端)。

<div class="box1" s='<%=value1 %>' t='<%=value2 %>'>
   <div id="circle" style="display: none;">
   </div>
   <div class="dot" id="dot">
      <img src="orangeDot.png" />
   </div>
</div>

和脚本:

<script type='text/javascript'>
    $(document).ready(function () {
        $(".box1").hover(function () {
            var source = $(this).attr('s');
            var target = $(this).attr('t');
            $('#dot').attr("style", "display: none;");
            $('#circle').hide().load('/GetCircle?s=' + source + '&t=' + target).show();
        }, function () {
            $('#circle' + divid).attr("style", "display: none;");
            $('#dot' + divid).attr("style", "display: inline-block;");
        });
    });
</script>

Answer 1

为什么不直接使用像 var ajaxed = false 这样的 bool 标志，并在请求完成一次后将其切换为 true？然后只需将您的悬停操作包装在ajaxed检查中即可。