jQuery: wait for function to complete to continue processing?

Question

Hey all. I have, what appears to be, a trivial problem. I have the following JavaScript:

$(function() {
    var r = GetResults();

    for(var i = 0; i < r.length; i++) {
        // Do stuff with r
    }
});

function GetResults() {
   $.getJSON("/controller/method/", null, function(data) {
       return data;
   });
}

Due to the fact that I'm calling a method asynchronously, the script continues executing and when it encounters the for loop, r obviously isn't going to have a value yet. My question is: when I have a method that is doing an asynchronous operation, and I'm dependent on the data it returns back in the main block, how do I halt execution until the data is returned? Something like:

var r = GetResults(param, function() {

});

where the function is a callback function. I cannot move the for loop processing into the callback function of the JSON request because I am reusing the functionality of GetResults several time throughout the page, unless I want to duplicate the code. Any ideas?

score 13 · Accepted Answer · answered Sep 21 '09 at 17:58

13

move your "do stuff with r" block into your $.getJSON callback. you can't do stuff with r until it has been delivered, and the first opportunity you'll have to use r is in the callback... so do it then.

$(function() {
    var r = GetResults();  
});

function GetResults() {
   $.getJSON("/controller/method/", null, function(data) {
       for(var i = 0; i < data.length; i++) {
           // Do stuff with data
       }
       return data;
   });
}

answered Sep 21 '09 at 17:58

Ty W

6,694
4
28
36

Thank you for the response. The reason I split GetResults out was that I am reusing that functionality several times throughout the page. I should edit my post to state that. – user135383 Sep 21 '09 at 17:59
if you need to do the same processing on data coming from multiple places, just replace your callback function with a named function and do the processing there. $.getJSON("/controller/method/", null, processData(data)); function processData(d) { ... } – Ty W Sep 21 '09 at 18:03

score 8 · Answer 2 · answered Sep 21 '09 at 18:39

8

I've run into something similar before. You'll have to run the ajax call synchronously.

Here is my working example:

$.ajax({
    type: "POST",
    url: "/services/GetResources",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    data: '{resourceFileName:"mapedit",culture:"' + $("#lang-name").val() + '"}',
    cache: true,
    async: false, // to set local variable
    success: function(data) {
        localizations = data.d;
    }
});

answered Sep 21 '09 at 18:39

ScottE

21,530
18
94
131

This certainly works, but it blocks the UI thread, doesn't it? (Perhaps that's acceptable, though it doesn't seem necessary given the information we have so far.) – Jeff Sternal Sep 21 '09 at 19:27
Yes, it does block, but of course only for the duration of the request. I don't see any other way around it, given what you're looking for. I went down the same road and went the sync route. – ScottE Sep 21 '09 at 20:45

score 7 · Answer 3 · answered Sep 21 '09 at 17:59

Ajax already gives you a callback, you are supposed to use it:

function dostuff( data ) {
    for(var i = 0; i < data.length; i++) {
        // Do stuff with data
    }
};
$(document).ready( function() {
    $.getJSON( "/controller/method/", null, dostuff );
});

score 3 · Answer 4 · answered Sep 21 '09 at 17:58

3

You could do this:

$(function() {
    PerformCall();        
});

function PerformCall() {
   $.getJSON("/controller/method/", null, function(data) {
       for(var i = 0; i < data.length; i++) {
        // Do stuff with data
       }
   });
}

answered Sep 21 '09 at 17:58

Quintin Robinson

81,193
14
123
132

score 2 · Answer 5 · answered Sep 21 '09 at 18:01

The short answer is that you can't block on an asynchronous operation...which is of course, the meaning of "asynchronous".

Instead, you need to change your code to use a callback to trigger the action based on the data returned from the $.getJSON(...) call. Something like the following should work:

$(function() {
  GetResults();
});

function GetResults() {
  $.getJSON("/controller/method/", null, function(data) {
    for(var i = 0; i < data.length; i++) {
      // Do stuff with data
    }
  });
}

Jeff Sternal · Answer 6 · 2009-09-21T19:28:47.843

Given your updated requirements ...

I cannot move the for loop processing into the callback function of the JSON request because I am reusing the functionality of GetResults several time throughout the page, unless I want to duplicate the code. Any ideas?

... you could modify GetResults() to accept a function as a parameter, which you would then execute as your $.getJSON callback (air code warning):

$(function() {
    GetResults(function(data) {
        for(var i = 0; i < data.length; i++) {
            // Do stuff with data
        }
    });
});

function GetResults(callback) {
   $.getJSON("/controller/method/", null, callback);
}

As you can see from the general tide of answers, you're best off not trying to fight the asynchronous jQuery programming model. :)

score 0 · Answer 7 · answered Sep 21 '09 at 17:58

0

This is not possible.

Either you make your function synchronous or you change the design of your code to support the asynchronous operation.

answered Sep 21 '09 at 17:58

Georg Schölly

124,188
49
220
267

ctford · Answer 8 · 2009-09-21T18:49:55.533

0

Move the data processing into the callback:

$(function() {
    GetResults();
});

function GetResults() {
   $.getJSON("/controller/method/", null, function(data) {

       for(var i = 0; i < data.length; i++) {
           // Do stuff with data
       }
   });
}

edited Sep 21 '09 at 18:49

answered Sep 21 '09 at 17:59

ctford

7,189
4
34
51

this wont work. your return statement will return from the callback, not from GetResults. This solution will never work as it does not use callbacks properly – mkoryak Sep 21 '09 at 18:33
@mkoryak Thanks. I've removed the return from the callback. – ctford Sep 21 '09 at 18:50

score 0 · Answer 9 · answered Sep 21 '09 at 18:34

You can have a callback with parameters that should work nicely...

$(function() {
    GetResults(function(data) {
      for(var i = 0; i < data.length; i++) {
        // Do stuff with data
      }
    });

});

function GetResults(func) {
   $.getJSON("/controller/method/", null, func);
}

jQuery: wait for function to complete to continue processing?

9 Answers9

Linked