的jQuery：执行

Question

订单继是我的代码：

$(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 
    } 
}); 

所需执行的顺序：

线1

2号线（具有值相同，在1号线）

第3行

实际执行顺序：

2号线（价值：未定义）

3号线

1号线（修正值）

如何控制这些线以获得与正确的价值观所需要的行执行的顺序？

Answer 1

由于AJAX调用是异步要么你移动在成功回调的所有代码，或者你使用递延对象来处理正确的执行顺序

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(); 

或者你也可以使用这个

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 
     } 
    }); 
}) 

Answer 2

将第2行和第3行放入$.getJSON回调中，否则第1行在回调完成后异步执行，其余部分同步执行。

Answer 3

getJSON是异步的。你想它的负荷发生后，一切都需要在回调：

$(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 
     } 
    }); 
}); 

Answer 4

与您的方案

通常情况下，你会打电话来阿贾克斯和使用成功的命令做你的处理，如：

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

如果你真的需要做你的代码，就像你所说，你可以使用async: false，如：

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