Ajax- execute return false before success

Question

I have to display element on mouseover.

There are details in this element which are brough through ajax.

The problem that the UI is not "smooth" due to ajax issue.

The return false is executed before success. Why?

var companyInfoHeight = $("#company-info").outerHeight();
$('.notifications-container .notification .notification-info .notification-from-user').on('mouseover', function(event){
    var base = $(this)
    jQuery.ajax({
        url: tooltipUrl,
        type:'POST',
        data: {userId : $(this).attr('data-userid')},
        success:function(data,textStatus){

            $("#personInfo").html(data)
            $("#personInfo").css({'top':base.offset().top-userInfoHeight-115,'left':base.offset().left}).show();
        }
    });
    return false;
})

function onMouseOut(){
    $('.user-info').on('mouseleave', function(event){
        $(this).hide();
    })
}
onMouseOut();

it's *asynchronous*, meaning that it will do the ajax call *while* it's running the other code. — DLeh, Mar 04 '15 at 14:28
Yes.. @DLeh is right...so either this can be resolved by making ajax call sync or else if you can put return false into success. — TechnoCrat, Mar 04 '15 at 14:31
I have another function which the return execute after the success and the UI is "smooth" — sarit rotshild, Mar 04 '15 at 14:31
It sounds like the endpoint you're requesting from takes a decent amount of time to return. Could you consider retrieving that info just after the page loads, and only showing it when the mouseover happens? Your only other option would be to have a "data loading" state to indicate something happening. — Katana314, Mar 04 '15 at 14:36

score 0 · Answer 1 · edited May 23 '17 at 10:09

Because success is a delayed event(Asynchronous). It takes a bit of time for your computer to send a message to the server. Success is the function run once your computer has sent the message to the server

If i ran this code than you would be alerted "2" before "1":

setTimeout(function(){alert("1")}, 100);
alert("2")

Because setTimeout is a delayed event, an ajax call works the same way.

What you might be looking for is html get functions that wait until they recieved server information before completing:

HTTP GET request in JavaScript?

Ajax- execute return false before success

1 Answers1