Stop post request on event

ajax, jquery

Solution

The jQuery AJAX methods return a `jqXHR` object which is an extension of the native `XMLHttpRequest` object, which has an `abort` method to stop the request:

var xhr;
$('.show_tooltip').hover(
    function(){
        //Save reference to the jqXHR object
        xhr = $.post('getdata.php', function(data) {
            $('#tooltip').html(data);
            $('#tooltip').show()
        });
    },
    function(){
        xhr.abort(); //Abort the request
        $('#tooltip').hide(); 
    }
);

Problem

I have a tooltip with data loaded from ajax: ``` $('.show_tooltip').hover( function(){ $.post('getdata.php', function(data) { $('#tooltip').html(data); $('#tooltip').show() }); }, function(){ $('#tooltip').hide(); } ); ``` It works. But the problem is - when I hover it over element and quickly move mouse out, so `$('#tooltip').show()` have no effect, and it `hide()`. But then when data is loaded it popsup and stays shown without any hover. What can be done about that. Is there any way to stop post request altogether?

Original source