tell javascript to run jquery ajax first - Stack Overflow

admin管理员组

文章数量:1435775

In short, how do I let alert(1) run first:

    $.post('example.php', function() {
        alert(1);
    })
    alert(2);
    alert(3);
    alert(4);

But jquery ajax call seem like run in asynchronous method. So JavaScript will run everything below first, alert(2) to alert(4), then back to the post method, alert(1).

Certainly I can just put the code in the ajax function, but this make no sense when I have dozens of functions, then I would have to add the code to all functions.

    $.post('example.php', function() {
        alert(1);
        example();
    })

    function example() {
        alert(2);
        alert(3);
        alert(4);
    }

I want to get some json data from an ajax call, and use it later. So is there any smart solution?

---

2021-08-25

after 8 years, introduction of async / await is awesome, i don't really use jquery anymore, so i didn't test the code

await Promise.resolve($.post('example.php', function() {
    alert(1);
    example();
}));

alert(2);
alert(3);
alert(4);

In short, how do I let alert(1) run first:

    $.post('example.php', function() {
        alert(1);
    })
    alert(2);
    alert(3);
    alert(4);

But jquery ajax call seem like run in asynchronous method. So JavaScript will run everything below first, alert(2) to alert(4), then back to the post method, alert(1).

Certainly I can just put the code in the ajax function, but this make no sense when I have dozens of functions, then I would have to add the code to all functions.

    $.post('example.php', function() {
        alert(1);
        example();
    })

    function example() {
        alert(2);
        alert(3);
        alert(4);
    }

I want to get some json data from an ajax call, and use it later. So is there any smart solution?

---

2021-08-25

after 8 years, introduction of async / await is awesome, i don't really use jquery anymore, so i didn't test the code

await Promise.resolve($.post('example.php', function() {
    alert(1);
    example();
}));

alert(2);
alert(3);
alert(4);

• javascript
• jquery
• ajax

Share Improve this question Follow edited Aug 25, 2021 at 22:24 aptx asked May 18, 2013 at 23:25 aptxaptx 7311 silver badge66 bronze badges 9

• 2 Am I missing something? Simply put alert(1) outside of your callback function, like all of the others. – Brad Commented May 18, 2013 at 23:27
• 3 The second way you show is the normal way to do it - you can pass the returned data to example(). @Brad - obviously the OP has simplified the code, where the real code is setting a value or something (the question does mention getting data from the Ajax call and using it later). – nnnnnn Commented May 18, 2013 at 23:28
• I think you may be looking for this very mon question stackoverflow./questions/14220321/… – elclanrs Commented May 18, 2013 at 23:28
• You could set the syncronous flag I think if you want to wait for the response before continuing – NickSlash Commented May 18, 2013 at 23:31
• Do you have tried api.jquery./jQuery.when I am sure this will solve your puzzle. – Anirudha Gupta Commented May 18, 2013 at 23:41

 |  Show 4 more ments

4 Answers 4

Sorted by: Reset to default 2

in jQuery I simply prefer to use $.when and $.then it's easy to do and code is more readable using this.

function CatchTheFish(){
console.log('we are catching the fish');
}
function EattheFish(){
console.log('now time to eat this fish');
}
$.when ( CatchTheFish() ).then( EattheFish() );

This code is work in latest version of jQuery 1.9.1

"Certainly I can just put the code in the ajax function, but this make no sense when I have dozens of functions, then I would have to add the code to all functions."

There are many patters that can make this easier, but if you're saying that dozens of functions may need to call this post, you could just put the post in a function, and have the function receive a callback.

function myPost(callback) {
    $.post('example.php', function(data) {
        alert(1);
        callback(data);
    })
}


// These are your "dozens of functions"
function a2() { alert(2); }
function a3() { alert(3); }
function a4() { alert(4); }


// These would be at various places in your application
myPost(a1);
myPost(a2);
myPost(a3);

Ultimately the best approach depends on what you mean by "dozens of functions", but certainly you won't need to do the hard coding that you seem to imply.

Passing functions as arguments is often the way to go, but there are other patterns as well that will set up a queue if that's what's needed.

The reason the alerts are firing in that order is because the "A" in AJAX stands for Asynchronous.

Here is how the code executes:

• The post method sends a request to the server, the second parameter is a callback function which will be called later once the request is returned by the server.
• It then proceeds to the next line of code after the post call, firing alert(2);
• Then the next line firing alert(3);
• Then the next line firing alert(4);
• This block of code is done running so control returns to the event loop
• Once the server returns the Ajax request, the callback function is called firing alert(1)

The best way to solve this would probably be to just move all of the code inside of the callback, that way it will only run once the request has been returned.

$.post('example.php', function() {
    alert(1);
    alert(2);
    alert(3);
    alert(4);
})

There probably isn't a need to put it in another function and call it as you suggested at the end of your question.

I would avoid "synchronous" Ajax requests, aside from being an oxymoron, they run counter to the whole purpose of using Ajax. Using Ajax should make your application more responsive, using synchronous requests does the opposite, it can cause the browser to lock up if a request timesout or takes a longtime to return from the server.

Here's an alternative that makes use of jQuery's custom events. It's basically like the other non-synchronous-suggesting answers, just looks slightly different and may help you keep our code nice and clean...

Use an object to bind a custom event to. Bind one or more handlers using the on method of jQuery on that object. Trigger the custom event at the end of your asynchronous function and jQuery will do the rest for you.

Example:

(function($){
    var fakeAsync = {};
    function fakeAsyncFunction( ) {
        alert(1);
        $(fakeAsync).trigger('customDone');
    }

    function a( ) {
        alert(2);
    }
    function b( ) {
        alert(3);
    }
    function c( ) {
        alert(4);
    }

    window.setTimeout(fakeAsyncFunction, 1000);

    $(fakeAsync).on('customDone', a)
        .on('customDone', b)
        .on('customDone', c);
})(jQuery);

Working fiddle.

本文标签： tell javascript to run jquery ajax firstStack Overflow