how do I defer javascript execution until an asynchronous method completes execution

Question

I have been looking into Jquery's when then and deferred keywords & functions but I couldn't get how do I apply them for a simple 3rd party asynchronous callback method in the ready() function of one of my views.

What actually happening is that my view gets loaded with no data because data was supposed to be populated from the completed execution of that asynchronous method in the ready(), but view is loaded before the asynchronous callback method could enter it's callback method. I have put an alert in that callback method and it never pops up as page has departed the scripts after loading completely.

Related to this, I have been looking into jQuery.holdReady() as well. I am kind of wandered as to how do I achieve synchronicity in this design.

This is how it looks like.

$( document ).ready(function() {
   var xmlRequest = $('#requestStringHiddenField').val();
   var action = "getListOfReservations";
   asynchronousCallbackCall(xmlRequest, "callbackMethod", action);
}); 

function callbackMethod(result) {
     //unreachable      
     alert(result);
}

Any help is appreciated.

score 0 · Answer 1 · answered Jun 13 '14 at 05:04

0

If the second and third arguments to asynchronousCallbackCall are callback functions, you should pass the functions themselves, not their names as strings:

var action = getListOfReservations;
asynchronousCallbackCall(xmlRequest, callbackMethod, action);

answered Jun 13 '14 at 05:04

Barmar

741,623
53
500
612

The view ends up loading empty without waiting for the asynchronousCallbackCall to complete. – user2918640 Jun 13 '14 at 05:27
That's how asynchronous calls work. They return immediately, and the callbacks are called when it completes. – Barmar Jun 13 '14 at 05:41
That is what I want to work against, by synchronizing this call in such a way that it pauses page ready() until the call completes and it reaches callback. – user2918640 Jun 13 '14 at 06:07

score 0 · Answer 2 · answered Jun 13 '14 at 06:55

0

If you are using $.ajax for performing an asynchronous call, then you should use the attribute async: false, which will prevent the script execution until the call is finished and response is returned.

For more information on $.ajax please refere this link:

http://api.jquery.com/jquery.ajax/

answered Jun 13 '14 at 06:55

Rahul Gupta

9,775
7
56
69

I am not using ajax. I am looking to synchronize an asynchronous JavaScript function in ready(), so that I can hold(pause) ready() to prevent the page from loading until the said function call completes. – user2918640 Jun 13 '14 at 06:59
1

Please provide the code of asynchronous JavaScript function ! – Rahul Gupta Jun 13 '14 at 07:03

score -1 · Answer 3 · answered Jun 13 '14 at 05:33

-1

Use synchronous call instead of asynchronous. Synchronous request wait for the call to complete before it execute the next code.

var request = new XMLHttpRequest();
request.open('GET', '/getListOfReservations', false); // 'false' makes the request synchronous
request.send(null);

if (request.status === 200) {
alert(request.responseText);
}

answered Jun 13 '14 at 05:33

user77318

80
5

getListOfReservations is not actually some servlet action mapping but just a string parameter for the javascript method asynchronousCallbackCall(). Though I am not dealing with ajax exactly but I would like to know such an analogy for an asynchronous javascript function call also. – user2918640 Jun 13 '14 at 06:14
Eeeck - synchronous Ajax is the worst possible user experience. It looks up the browser for the duration of the Ajax call. It should pretty much never be used. – jfriend00 Jun 13 '14 at 06:25

how do I defer javascript execution until an asynchronous method completes execution

3 Answers3