How to make setTimeout behave like a wait

Question

I have a javascript code, and at a certain point, i want to pause the execution till an ajax communication is done before continuing.

I have the following

var set_ajax_done = function(){
  ajax_done = true;
}

// Ajax part
ajax_done = false;
$.ajax({
  url: $url,
  type: 'GET',
  success: function (result) {
    // some treatment
    set_ajax_done();
  }
});

// Make sure the ajax communication and treatment are done before continuing
make_sure_aj_comm_finished();


var make_sure_aj_comm_finished = function(){
  if ( ajax_done == false )
  {
    setTimeout(function(){
      make_sure_aj_comm_finished();
    }, 500);
  }
}

When i execute this code, it seems that the execuion just goes through and does not wait for the boolean variable ajax_done to true.

How could i make the code to execute make_sure_aj_comm_finishedrecursively till the variable ajax_done is true

Thanks!

Waiting is bad. Instead, just put the stuff you want to happen after the ajax call into the success function. — Jonathan M, Sep 28 '15 at 20:17
Might be of help: http://stackoverflow.com/questions/20209097/what-is-the-difference-between-asyncfalse-and-asynctrue-in-jquery-ajax it is a good read. However as said above by @JonathanM you shouldn't do that as it *can* freeze up the full page. — Script47, Sep 28 '15 at 20:20
In javascript, `wait` isn't really possible because it is single threaded; there's no other thread that would be able to unlock this thread. If you lock the thread, no logic can run that would unlock it. synchronous ajax gets around this because the browser can block and unblock the thread (just like it does with `alert` and `confirm` dialogs), but you should avoid this because it blocks everything, including events, css animations, dom rendering, gif animations, etc. It makes your site locked and prevents the user from interacting with it. — Kevin B, Sep 28 '15 at 20:25

score 1 · Answer 1 · answered Sep 28 '15 at 20:34

1

To reiterate, usually you want to stray from trying to turn asynch js into sych.

But if you must, you can accomplish what you want to do by placing what you want executed after the ajax call completes into one large function, and have that function called in the success callback of your Ajax function. No need to mess with the settimeout/recursive stuff for this.

ie:

$.ajax({
  url: $url,
  type: 'GET',
  success: function (result) {
    // some treatment
    everything_after_ajax();
  }
});

answered Sep 28 '15 at 20:34

Paul G

829
7
11

I'll follow this approach ! Although conceptually it does not make sense to put everything in the ajax success callback, because the ajax call is just a validation among other validation of a form fields ( it validates if the a certain domain exists )... – Rails Rails Sep 29 '15 at 14:53

score 0 · Answer 2 · answered Sep 28 '15 at 20:22

You should avoid trying to perform synchronous operations because this will block up the browser's UI thread making the browser unresponsive. That is why the success and error methods are provided so that you can perform asynchronous operations.

Check out the jqXHRObject in the jquery docs this makes the success and error methods act like promises, so you can perform operations on your response when the ajax query has fully executed and without blocking the UI thread.

score 0 · Answer 3 · answered Sep 28 '15 at 20:28

You could use setInterval

var make_sure_aj_comm_finished = setInterval(function(){
    if(ajax_done == true){
        clearInterval(make_sure_aj_comm_finished);
    }
}, 500);

But man, that CLEARLY isn't the right way to do this. If you have time, read about promises, maybe it will help you.

How to make setTimeout behave like a wait

3 Answers3