jquery : Order of execution

Question

Following's my code :

$(document).on("click",".ball_link", function makeDiv(){
    function fetchLevels(){
        $.getJSON('fetch_level.php',{level: clicked_ball}, function(data) {
        $.each(data, function(i,name) {
                alert(name.level_id); //Line 1
            });
        });
    }
    fetchLevels();
    alert(name.level_id); //Line 2
    while (//some condition){
        alert("hi 2"); //Line 3
    }
});

Required order of execution :

Line 1

Line 2 (with value same as that in line 1)

Line 3

Actual order of execution :

Line 2 (value : undefined)

Line 3

Line 1 (correct value)

How do I control the order of execution of these lines to get the required lines with right values?

because `async: false` will freeze the interface until the ajax call has completed — Fabrizio Calderan, Sep 24 '12 at 10:23
@SenthilKumar: see [Synchronous vs Asynchronous](http://stackoverflow.com/q/1052453/1048572), [No timeout](http://stackoverflow.com/q/7919881/1048572) or [Any reason to use a synchronous XMLHttpRequest?](http://stackoverflow.com/q/2088318/1048572) — Bergi, Sep 24 '12 at 10:27

Fabrizio Calderan · Accepted Answer · 2012-09-24T10:16:08.760

Since the ajax call is asynchronous either you move all code in the success callback or you use deferred objects to handle the right execution order

function fetchLevels() {

    $.getJSON('fetch_level.php', { level: clicked_ball })

    .done(function(data) {
        $.each(data, function(i,name) {
            alert(name.level_id); //Line 1
        });

        alert(name.level_id); //Line 2
        while (//some condition) {
            alert("hi 2"); //Line 3
        }
    });
}

fetchLevels();

or alternatively you may use this

function fetchLevels() { 
    return $.getJSON('fetch_level.php', { level: clicked_ball })
}

$.when(fetchLevels()).done(function(data) {
    $.each(data, function(i,name) {
          alert(name.level_id); //Line 1
    });

    alert(name.level_id); //Line 2
          while (//some condition) {
             alert("hi 2"); //Line 3
         }
    });
})

score 1 · Answer 2 · answered Sep 24 '12 at 10:09

Normally with your scenario, you'd call .ajax and do your processing using the success command, such as:

$.ajax({
  url: myUrl,
  dataType: 'json',
  data: myData,
  success: function(data) {
    // do stuff here.
  }
});

If you really need to do your coding like you've suggested, you can use async: false, such as:

$.ajax({
  url: myUrl,
  dataType: 'json',
  async: false,
  data: myData,
  success: function(data) {
    // set variable here, then work with it outside the function
  }
});

The second will, yup, and I've advised against the second option. The first option is the way I'd go about the solution. — Chris Dixon, Sep 24 '12 at 10:19

score 0 · Answer 3 · answered Sep 24 '12 at 10:06

0

Put line 2 and line 3 inside the $.getJSON callback otherwise line 1 is executed asynchronously after the callback is completed while the rest are executes synchronously.

answered Sep 24 '12 at 10:06

Konstantin Dinev

32,797
13
71
95

score 0 · Answer 4 · answered Sep 24 '12 at 10:07

getJSON is asynchronous. Everything you want to happen after its load needs to be in the callback:

$(document).on("click", ".ball_link", function makeDiv() {
     $.getJSON('fetch_level.php', {
         level: clicked_ball
     }, function (data) {
         $.each(data, function (i, name) {
             alert(name.level_id); //Line 1
         });

         fetchLevels();
         alert(name.level_id); //Line 2
         while ( //some condition){
             alert("hi 2"); //Line 3
         }
     });
 });

jquery : Order of execution

4 Answers4