Ajax工具提示没有；如果鼠标移动过快，它不会消失 - Ajax tooltip doesn't disappear if mouse moves too fast

Ajax tooltip doesn't disappear if mouse moves too fast

我的网页上的每个项目都有一个加载了ajax的工具提示。当鼠标移动过快时，它不会考虑mouseleave事件。然后，我尝试将工具提示内容与页面一起加载。但是，有很多内容，所以加载需要四秒钟的时间：/

我能做什么？

这是我的jquery代码：

$('.main').on({
    mouseenter: function(){
        var id = $(this).parent().data('candy');
        if(id != 0){ 
            $.ajax({
                url: 'tooltip.php',
                type: 'get',
                data: { 'type': 'candy', 'item_id': id },
                global : false,
                success: function(data){
                    $('.candyTooltip').html(data);
                    $('.candyTooltip .layer_item').show();
                }
            });
        }
    },
    mouseleave : function(){
        $('.candyTooltip .layer_item').hide();
    }
}, '.candy');

此外，我不知道它是否相关，但SQL查询需要1，2ms，PHP脚本需要3，94ms。

我终于找到了一种方法！！！

我所要做的就是将ajax请求放入一个变量中，并在mouseleave上中止它。

所以，现在看起来是这样的：

$('.main').on({
  mouseenter: function(){
      var id = $(this).parent().data('candy');
      if(id != 0){ 
         query = $.ajax({
              url: 'tooltip.php',
              type: 'get',
              data: { 'type': 'candy', 'item_id': id },
              global : false,
              success: function(data){
                  $('.candyTooltip').html(data);
                  $('.candyTooltip .layer_item').show();
              }
          });
      }
  },
  mouseleave : function(){
      if (query) { query.abort(); }
      $('.candyTooltip .layer_item').hide();
  }
}, '.candy');