Question

I have AJAX request that takes data from remote file and displays in a div on a page. The AJAX is called and div with data is displayed when user hovers mouse over a link, and it disappears when the mouse is moved out of the link. The div displays immediately, but when mouse is moved out there is about 5 second delay between moving mouse out and hiding the div.

I presume it has something to do with AJAX request blocking the hide function, because when I removed AJAX request the div hides immediately.

Is there something I could do to abort, kill or ignore AJAX when the mouse is removed from the link and just hide the div no matter what?

Here is the code I have so far:

$(function(){

var showPopup = function(){
    $.ajax({
        type: "GET",
        url: "/process.cfm",
        data: "id=" + 1,
        success: function(data){
            $(".profilePopup").html(data);

            if ($(data).find(".profileResult").length) {
                var text = $(data).find(".profileResult").html();
                $(".profilePopup").html(text);
            }
        }
    });

    $(".profilePopup").show();
}

var hidePopup = function(){
    $(".profilePopup").hide();
}

$("#username").mouseover(showPopup);
$("#username").mouseout(hidePopup);
});

Answer 1

Try this:

 var xhr = $.ajax({
        type: "POST",
        url: "some.php",
        data: "name=Somename",
        success: function(msg){
           alert( "Data Saved: " + msg );
        }
    });

    //kill the request
    xhr.abort()