mousleaveで前回のイベントを停止

Question

mouseenterで、hared 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(); 
} 

私は事前に.stopPropagation()と.preventDefault() MouseEnterイベントとmouseleaveにも.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イベントのホバー代わりに使用し、mouseleaveか？もちろん、同様の問題が発生します。あなたがあまりにも速くマウスを動かすと、すべてがロードされます。 そのため、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-要求があってはいけません。