Question

On mouseenter I make an AJAX request to get some dynamic text based on the title attribute of the hovered href and show it in another div.

It’s a list of links and when I hover over them very fast, all ajax requests are finished and all text is shown one after another very quick until the current text shows up.

How can I stop previously called requests and prevent every text to show up in my div?

This is what I’ve got so far:

$('.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();
}

I tried to use .stopPropagation() and .preventDefault() on mouseenter and mouseleave and also .abort()

Thanks in advance!

Answer 1

Alex’s solution is sufficient, but does not abort slow requests. Also, I avoid plugins for trivial things like timeout. 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);​