javascript - 从 XML 中填充下拉列表 - 代码执行顺序错误

Question

我正在尝试使用 jQuery 从 XML 文件中填充下拉框。当代码运行时，它似乎按顺序执行。

jQuery：

  $("#filterButton").click(function() {
    var dropdown = new Array();
    $.get('../restaurants.xml', function (xmlFile) {
      $(xmlFile).find('restaurant').each(function () {
        var found = false;
        var $restaurant  = $(this);
        var type = $restaurant.attr("type");

        dropdown.forEach(function(arrayValue){
          if(arrayValue == type){
            found = true;
          }
        });
        if(found == false){
          dropdown.push(type);
        }
      });
    });
    $('#potentialRestaruants').append('<select>');
      dropdown.forEach(function(arrayValue){
        $('#potentialRestaruants').append('<option value="' + arrayValue + '">' + arrayValue + '</option>' );
      });
      $('#potentialRestaruants').append('</select>'); 
  });

但是代码按以下顺序运行：

  $("#filterButton").click(function() {
    var dropdown = new Array();

然后

$('#potentialRestaruants').append('<select>');
      dropdown.forEach(function(arrayValue){
        $('#potentialRestaruants').append('<option value="' + arrayValue + '">' + arrayValue + '</option>' );
      });
      $('#potentialRestaruants').append('</select>'); 
  });

然后

$.get('../restaurants.xml', function (xmlFile) {
  $(xmlFile).find('restaurant').each(function () {
    var found = false;
    var $restaurant  = $(this);
    var type = $restaurant.attr("type");

    dropdown.forEach(function(arrayValue){
      if(arrayValue == type){
        found = true;
      }
    });
    if(found == false){
      dropdown.push(type);
    }
  });
});

为什么代码按此顺序运行，我怎样才能按我需要的顺序运行？

Answer 1

它按照您描述的顺序运行，因为 $.get 异步执行。因此，任何依赖于 $.get 函数成功执行的代码也应该包含在该函数的末尾，即 append 和第二个 forEach。