Javascript jquery：执行顺序

以下是我的代码：

$(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行（正确值）

---

如何控制这些行的执行顺序，以获得具有正确值的所需行？

将第2行和第3行放入

$回调中。getJSON

否则，在回调完成后异步执行第1行，而其余行同步执行。

将第2行和第3行放入回调中

$.getJSON

回调，否则在回调完成后异步执行第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
         }
    });
})

---

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

---

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

---

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

---

通常在场景中，您会调用.ajax并使用success命令进行处理，例如：

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

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

如果确实需要按照建议进行编码，可以使用

async:false

，例如：

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

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

---

通常在场景中，您会调用.ajax并使用success命令进行处理，例如：

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

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

如果确实需要按照建议进行编码，可以使用

async:false

，例如：

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

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

---

@SenthilKumar:永远不要这样做。@Bergi，你能告诉我为什么不好吗？因为

async:false

将冻结接口，直到ajax调用完成为止completed@SenthilKumar：见，或@Bergi谢谢！！我不知道@SenthilKumar:永远不要这样做。@Bergi，你能告诉我为什么不好吗？因为

async:false

将冻结接口，直到ajax调用完成为止completed@SenthilKumar：见，或@Bergi谢谢！！我不知道！第二种选择是的，我反对第二种选择。第一种选择是我解决问题的方式。第二种选择是的，我反对第二种选择。第一个选择是解决方案的方法。