Call ajax function, then wait, then call again another ajax function

Question

So far I did this:

$.when(Results.ServiceController.Ajax1(clickedNumber))
.then(Results.UtilFunctions.Wait(5000))
.then(Results.ServiceController.Ajax2(clickedNumber));

My Ajax1 function returns ajax object. My Wait function looks like this:

function (time) {
    var ret = new $.Deferred();
    setTimeout(function () {
        ret.resolve();
    }, time);
    return ret;
}

Problem is that second ajax request funtction (Ajax2) is not waiting for Wait function! Edit: I also tried:

$.when(Results.ServiceController.Ajax1(clickedNumber),Results.UtilFunctions.Wait(5000))  
.then(Results.ServiceController.Ajax2(clickedNumber));

and nothing changed. From jQuery documentation:

"In the case where multiple Deferred objects are passed to jQuery.when, the method returns the Promise from a new "master" Deferred object that tracks the aggregate state of all the Deferreds it has been passed. The method will resolve its master Deferred as soon as all the Deferreds resolve, or reject the master Deferred as soon as one of the Deferreds is rejected. If the master Deferred is resolved, it is passed the resolved values of all the Deferreds that were passed to jQuery.when. For example, when the Deferreds are jQuery.ajax() requests, the arguments will be the jqXHR objects for the requests, in the order they were given in the argument list."

Try making `async=false` for you ajax call. [look @ help](http://stackoverflow.com/questions/1478295/what-does-async-false-do-in-jquery-ajax) — Shubh, Mar 27 '14 at 10:42
Why would I? From jQuery documentation it seems I don't have to do that. I'm returning ajax (that meens I'm returning promise from first function-Ajax1 function) Only after second function - Wait function returns promise, third function Ajax2 should be executed. — Vlado Pandžić, Mar 27 '14 at 10:46

ElmoVanKielmo · Accepted Answer · 2014-03-27T10:47:56.373

1

setTimeout(...) always returns immediately and the function passed as the first parameter is executed after timeout expires.

You should do something like:

function (f, arg, time) {
    setTimeout(function () {
        f(arg);
    }, time);
}

$.when(Results.ServiceController.Ajax1(clickedNumber))
.then(Results.UtilFunctions.Wait(
    Results.ServiceController.Ajax2, clickedNumber, 5000
));

instead.

edited Mar 27 '14 at 10:47

answered Mar 27 '14 at 10:42

ElmoVanKielmo

10,907
2
32
46

I would like to make my Wait function more "generic". I will try now to do that anyway. – Vlado Pandžić Mar 27 '14 at 10:43

score 0 · Answer 2 · answered Mar 27 '14 at 10:49

0

Ajax-Functions are asynchronous by default.

Solution 1 is: Make synchronous functions. Like with jQuery:

$.ajax(
      url: ".../foo",
      async: false
)
$.ajax(
      url: ".../bar",
      async: false
)

Solution 2 is: Do the second ajax-function-call in the success-callback from the first function call. Like with jQuery:

$.ajax(
      url: "...",
      success: function (data) {
        anotherAjaxFunction()
      }
)

answered Mar 27 '14 at 10:49

DerZyklop

3,672
2
19
27

I would like to put code that organizes the order of the functions in separate function. I'm trying to use jQuery when-then. It should work but it doesn't. – Vlado Pandžić Mar 27 '14 at 10:51

score 0 · Answer 3 · answered Mar 27 '14 at 11:02

Not sure why it's not working for you. See this fiddle for a simple demonstration.

function wait(time) {
   var ret = new $.Deferred();
   setTimeout(function() {
       ret.resolve('resolved in ' + time);
   },time);

   return ret;
}

function ajaxCallOnWait() {
    $.each(arguments, function(index, res) {
        $('ul').append('<li>' + res + '</li>');
    });
}

var promise = $.when(wait(1000), wait(5000), wait(2000));
promise.then(ajaxCallOnWait);

It waits for a total of 8 seconds, $.when returns a deferred, on this deferred I simply do a then and call another function. This can be an ajax call or a simple append like in my sample.

Call ajax function, then wait, then call again another ajax function

3 Answers3