Javascript wait for a function to return

Question

I have a function "add_floor(xxx)" in a loop (see bellow) that take some time to complete, so i would like to know how to wait for the return of this function before moving to the next step which is in my case "add dawfeature points". I understand that I could use a callback method but then I would need to restart the complete loop that goes over the json elements in the calledback function. Not really sexy, so is there a way to avoid this ?

function add_maps_from_json(json) {
  for (var i = 0; i < json.maps.length; i++) {
    // add the maps to the combox box and display last one 
    add_floor(json.maps[i].mapName);

    // add the dawfeature points to the map
    for (var j = 0; i < json.maps[i].APs.length; j++) {
      var idx = find_map_index(); 
      console.log(idx);
      var map = mapObjectArray[idx];
      etc...
      etc...

    }
  }
}

the only way it wouldn't just follow on from previous code is if you're creating anonymous functions or doing ajax calls or any timeout functions?? — rorypicko
– rorypicko, Commented Jan 13, 2014 at 16:49
Are there any AJAX calls here? Otherwise, this should be synchronous. Meaning it will wait until it's done before it returns. If you are using AJAX calls, the only way would be with callbacks. — gen_Eric
– gen_Eric, Commented Jan 13, 2014 at 16:50
@RocketHazmat "synchronous" thank you, much better than 'follow on from previous code' lol — rorypicko
– rorypicko, Commented Jan 13, 2014 at 16:50
There's your problem! onload is an DOM event, DOM event handlers are called asynchronously. You'll probably need to rework this a bit, perhaps make add_floor return a promise which is resolved when all images are loaded and added. — Mattias Buelens
– Mattias Buelens, Commented Jan 13, 2014 at 16:58

Gil Sousa · Accepted Answer · 2014-01-13 16:53:54Z

2

You can make the function return a value to a variable. That way the program will pause until the function as run. Like this:

var maps = add_maps_from_json(json);

Or you can use plugin.js and do module calls.

http://requirejs.org/docs/plugins.html

answered Jan 13, 2014 at 16:53

Gil Sousa

8446 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tony590 Over a year ago

Hi the return value trick doesn't work, I will look at the plugin.js

Mehran Hatami · Accepted Answer · 2014-01-13 17:14:22Z

as you have said you have to add a callback parameter to add_floor and for managing your loop you can do async loop, like this:

//change the add_floor function
function add_floor(mapName, callback){
    //your code
    //you probably have some kind of ajax call or setTimeout
    //then call your callback after your ajax response or timer callback
    //....
    callback();
    //....
}

function add_maps_from_json(json) {
    doLoop(json, 0)
}

function doLoop(json, i) {
    if(i < json.maps.length) return;
    add_floor(json.maps[i].mapName, function () {
        // add the dawfeature points to the map
        for (var j = 0; i < json.maps[i].APs.length; j++) {
            var idx = find_map_index();
            console.log(idx);
            var map = mapObjectArray[idx];
            //etc...
            //etc...

        }
        doLoop(json, i + 1);
    });
}

forgivenson · Accepted Answer · 2014-01-13 16:52:36Z

1

If add_floor doesn't do an ajax call, then your code will work fine as it is now.

If add_floor DOES do an ajax call, then you can put the inner for loop inside a separate function that you then use as the callback for the ajax call in add_floor.

answered Jan 13, 2014 at 16:52

forgivenson

4,4332 gold badges21 silver badges28 bronze badges

1 Comment

Ted Hopp Over a year ago

There are other ways of creating a non-blocking call besides using Ajax--for instance, web workers, or using setTimeout (as the Clumpy library does to simulate non-blocking loops).

Collectives™ on Stack Overflow

Javascript wait for a function to return

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related