Question posted in
You can find the official documentation here.

execution order with jQuery's AJAX – Jquery ajax

I have this code (ajax is async):

function echoHello()
{
    return "hello";
}

function echoWorld()
{
    return $.ajax({
        //this will return "world";
    });
}

console.log(echoHello());

$.when(echoWorld()).done(function(response)
{
    console.log(response);
});

which outputs "hello" and "world" (in that order). But if change it a little bit, so the console.log() is in different order:

function echoHello()
{
    return "hello";
}

function echoWorld()
{
    return $.ajax({
        //this will return "world";
    });
}

$.when(echoWorld()).done(function(response)
{
    console.log(response);
});

console.log(echoHello());

is the same output guaranteed? Or it could potentially output "world" and then "hello"?

Tags:

2

Answers


  1. 0

    Ajax makes a call to the web server and is asynchronous. You don’t know how long it will take. It is the same as

    setTimeout(_ => { console.log('world'); }, 0);
console.log('Hello');

    Hello will run first as the async function runs after the current block even though the time is set to 0.

    Login or Signup to reply.
  2. 0

    $.ajax() returns a jqXHR Object which implements the Promise interface. And if async option is false, it sends a Synchronous Ajax Request and returns a resolved Promise.

    And for the $.when() if the argument is neither Deferred nor Promise nor Thenable, it returns a resolved Promise.

    So below example will print "Sync", "Hello", "World", "Async".

    JSFiddle

    jQuery(document).ready(function( $ ){
    let echoHello = () => "Hello";
    let echoAsync = () => $.ajax({url: "data:text,Async"});
    let echoSync = () => $.ajax({ async: false, url: "data:text,Sync" });

    let log = response => console.log(response);

    $.when(echoAsync()).done(log); // logs "Async"
    $.when(echoSync()).done(log); // logs "Sync"
    $.when(echoHello()).done(log); // logs "Hello"
    console.log('World'); // logs "World"
});

    And, for your information, as of jQuery 1.8, the use of async: false with jqXHR is deprecated.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search