How can I run Ajax functions synchronously from Javascript?

Question

I have the following code:

$('#DoButton').click(function (event) {
  event.preventDefault();
  $("input:checked").each(function () {
    var id = $(this).attr("id");
    $("#rdy_msg").text("Starting" + id);
    doAction(id);
  });
});

function doAction(id) {
            var parms = { Id: id };
            $.ajax({
                type: "POST",
                traditional: true,
                url: '/adminTask/doAction',
                async: false,
                data: parms,
                dataType: "json",
                success: function (data) {
                    $("#rdy_msg").text("Completed: " + id);
                },
                error: function () {
                    var cdefg = data;
                }
            });
        }

When the button is clicked it checks the form and for each checked input it calls doAction() which then calls an Ajax function. I would like to make it all synchronous with a 2 second delay between the completion of one call and the running of the next. The delay is to give the user time to see that the last action has completed.

By setting async=false will that really make the ajax function wait?

How can I add a 2 second wait after the Ajax has run and before the next call to doAction?

Could you clarify, you want to wait so the user can know that the action was completed. If you make your code synchronous, that means nothing in the webpage will work until after it has been run (think about how a program freezes while it is doing something). I would recommend maybe displaying a message after, or graying out the button instead. subtle cues are the best cues. — Jess, Jun 26 '11 at 05:38
possible duplicate of [How can I get jQuery to perform a synchronous, rather than asynchronous, AJAX request?](http://stackoverflow.com/questions/133310/how-can-i-get-jquery-to-perform-a-synchronous-rather-than-asynchronous-ajax-req) — Starx, Jun 26 '11 at 05:54

score 2 · Answer 1 · edited May 23 '17 at 10:33

2

There is option in jQuery to set the ajax function synchronous

$.ajaxSetup({
   async: false
});

To make the function to wait you can use .delay()

Try the solution of this question also.

edited May 23 '17 at 10:33

Community

1
1

answered Jun 26 '11 at 05:50

Starx

77,474
47
185
261

redexp · Accepted Answer · 2011-06-26T06:24:14.703

Try to do it using recursion

$('#DoButton').click(function (event) {
  event.preventDefault();
  doAction( $("input:checked").toArray().reverse() );
});

function doAction(arr) {
    if( arr.length == 0 ) return;

    var id = arr.pop().id;
    $("#rdy_msg").text("Starting" + id);
    $.ajax({
        type: "POST",
        traditional: true,
        url: '/adminTask/doAction',
        async: false,
        data: { Id: id },
        dataType: "json",
        success: function (data) {
            $("#rdy_msg").text("Completed: " + id);
            setTimeout(function(){ doAction(arr); }, 2000);
        },
        error: function () {
            var cdefg = data;
            $("#rdy_msg").text("Error: " + id);
            setTimeout(function(){ doAction(arr); }, 2000);
        }
    });
}

score -1 · Answer 3 · answered Jun 26 '11 at 05:37

-1

Use setTimeout for the AJAX call doAction.

answered Jun 26 '11 at 05:37

Troy SK

1,279
7
14

How can I run Ajax functions synchronously from Javascript?

3 Answers3