Question

我的网页上的每个项目都有一个加载了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,2毫秒而PHP脚本需要3,94毫秒。

Answer 1

我终于找到了办法！

我所要做的就是将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');

如果鼠标移动太快，Ajax工具提示不会消失

1 个答案: