jQuery AJAX Race Condition

Question

I've seen similar questions asked on SO but no quite my problem.

I have something like

var x = 5;
if( some condition ){
    $.ajax({
        url:"...",
        success: function(response){
            x = response.x;
        }
    }
}
some other logic
use x variable

What is happening is the thread executing the JS gets to the logic that uses x before the asynchronous task comes back.

Normally I would just put whatever logic inside the success function but I need the logic to happen regardless of whether or not the condition is met and I don't want to replicate code. Anyone have any suggestions? Should I just async to be false?

Thanks!

score 3 · Accepted Answer · answered Mar 14 '15 at 03:35

async false would be one way to go about it since you want the value returned by x to be used if the condition is true.

You could also use promises.

var x = 5;
var ajaxCall;
if(some condition) {
    ajaxCall = $.ajax({ 
        url: "...";
    });
}

function usingx(x) {
     //Add your logic
}

if(typeof(ajaxCall) === 'undefined') {
    usingx(x);      
} else {
    ajaxCall.done(function(data){
        usingx(data.x);
    });
}

It is either going to async false or you have call the function in two cases, one case where it can execute without waiting and the other in which it has to wait.

A bit more complicated way would be to wait till Ajax gets completed and then run the function.

var x = 5;
var isCallMade = false;
if(some condition) {
    isCallMade = true;
    ajaxCall = $.ajax({ 
        url: "...";
    }).done(function(data){
        x = data.x;
    }).always(function(){
        isCallMade = false;
    });
}

function useX() {
    if(isCallMade) {
        setTimeout(useX, 100); //Wait for ajax call to finish
    } else {
        //logic using x
    }
}

Hey, I think you were really the only one who understood my question (probably my fault for wording it poorly). I used a variation of your first answer. Thanks! — Galway, Mar 14 '15 at 04:35

score 1 · Answer 2 · answered Mar 14 '15 at 03:55

Use the always callback.

if( some condition ){
    $.ajax({
        url:"...",
        success: function(){ // BTW, as of jQuery 1.8 this is referred to as "done"
          // Success specific code
        },
        always: function() {
          // Code that always executes regardless of success or failure
        }
    }
}

score 0 · Answer 3 · edited May 23 '17 at 10:27

0

JQuery also has an fail() callback in case the Ajax fails. I'd just put the logic in both cases. (abstracted into a function) Check out this question.

jQuery: Handle fallback for failed AJAX Request

**Revision

$.ajax's complete() method runs after an ajax call no matter what. Sounds perfect. http://api.jquery.com/jquery.ajax/

edited May 23 '17 at 10:27

Community

1
1

answered Mar 14 '15 at 03:34

MDrewT

66
8

well technically yes, but typically the point of this operation is for the logic to do something _with the response_. – cloudworks Apr 28 '16 at 05:08
The response is passed as the first variable to any callback registered with complete – MDrewT Oct 06 '16 at 21:26

jQuery AJAX Race Condition

3 Answers3