停止對mousleave

Question

在了mouseenter以前的事件我做一個AJAX請求，我們將根據懸停HREF的title屬性的一些動態文本，並顯示在另一個DIV。

這是一個鏈接列表，當我將鼠標懸停在他們速度非常快，所有的Ajax請求完成後，所有的文本陸續很快出一個，直到當前的文本顯示出來。

我該如何停止先前調用的請求，並防止每個文本在我的div中出現？

這是我到目前爲止有：

$('.link').mouseenter(function(e) { 

var text = $(this).attr('title'); 

$('#showtext').show().html('Loading...'); 

    $.ajax({ 
    url: '/show.php?text=' + text, 
    cache: false, 
    success: function(data) { 
     $('#showtext').html(data); 
    }, 
    error: function(xhr, ajaxOptions, thrownError){ 
     $('#showtext').html('Error.'); 
    } 
    }); 

}); 

$('.link').mouseleave(function() { 
    $('#showtext').hide(); 
} 

我試圖上的mouseenter使用.stopPropagation()和.preventDefault()和鼠標離開，也.abort()

提前感謝！

Answer 1

亞歷克斯的解決方案是足夠的，但不會中止慢的請求。另外，我避免了像超時之類的瑣碎事情的插件。 jsfiddle

(function($) { 
    var request; 
    $('.link').bind('updatetext', function() { 
     var text = $(this).attr('title'); 
     $('#showtext').show().html('Loading...'); 
     request = $.ajax({ 
      url: '/show.php?text=' + text 
      cache: false, 
      dataType: 'html', 
      success: function(data) { 
       $('#showtext').html(data); 
      }, 
      error: function(xhr, ajaxOptions, thrownError) { 
       $('#showtext').html('Error finding ' + text); 
      } 
     }); 
    }); 
    var timeout; 
    $('.link').mouseenter(function(e) { 
     var self = this; 
     clearTimeout(timeout); 
     timeout = setTimeout(function() { 
      $(self).trigger('updatetext') 
     }, 500); 
    }); 
    $('.link').mouseleave(function() { 
     if (request) { 
      request.abort(); 
      request = null; 
     } 
     $('#showtext').hide(); 
    }); 
})(jQuery);​ 

Answer 2

中止請求應該像那：

var req = $.ajax({ 
    url: '/show.php?text=' + text, 
    cache: false, 
    success: function(data) { 
     $('#showtext').html(data); 
    }, 
    error: function(xhr, ajaxOptions, thrownError){ 
     $('#showtext').html('Error.'); 
    } 
}); 
//abort 
req.abort() 

，如果你使用的mouseenter的懸停，而不是和鼠標離開呢？當然，你會得到類似的問題。如果你翱翔得太快，一切都會被加載。 因此，我建議你hoverIntent jQuery plugin。僅當鼠標在目標元素上停留數秒（可更改）時，纔會調用hoverIntent事件。 您的代碼會有點像這樣：

$('.link').hoverIntent(function(e) { 
    var text = $(this).attr('title'); 
    $('#showtext').show().html('Loading...'); 
    $.ajax({ 
     url: '/show.php?text=' + text, 
     cache: false, 
     success: function(data) { 
      $('#showtext').html(data); 
     }, 
     error: function(xhr, ajaxOptions, thrownError){ 
      $('#showtext').html('Error.'); 
     } 
    }); 
},function(e){ 
    $('#showtext').hide();    
}); 

因爲當你真的想事件僅觸發，永遠不應該有太多的AJAX請求。