AJAX-等待数据追加，然后循环下一个

Question

我正在用JavaScript创建一个下拉列表，我正在通过Ajax和JSON加载数据，此时我的代码在一组部门中循环，并在每次迭代中运行到Ajax调用中。

我的问题是，我的数据似乎是按随机顺序附加的，很可能是按加载最快的顺序加载。

我希望能够循环执行Ajax调用，并按照我声明的顺序(针对每个部门(附加数据。这是可以做的事情吗？

这是我的代码：

//-- Ajax --
var departments = ['Accounts', 'Commercial', 'Installation', 'Production', 'Sales'];
var i;
for (i = 0; i < departments.length; i++) {
    $.ajax({
        type: "POST",
        url: "Default.aspx/EmployeesDropDown",
        data: '{X: "' + departments[i] + '"}',
        contentType: "application/json; charset=utf-8",
        dataType: "text json",
        async: true,
        success: createdropdown,
        failure: function () {
            alert("FAIL!");
        }
    });
}

//-- Creates dropdown --
function createdropdown(data) {
...appends all the data to my drop down list...
  }

如有任何帮助或建议，我们将不胜感激，并提前表示感谢。

EDIT：这个问题与相关问题不同，因为我需要能够循环遍历字符串数组，而不仅仅是基于数字进行迭代

Answer 1

如果您想按照部门在departments数组中出现的顺序加载它们，可以逐个加载，等待每个ajax请求完成，直到您开始下一个请求。

这里有一个例子：

var departments = ['Accounts', 'Commercial', 'Installation', 'Production', 'Sales'];
var i = 0;
function reqDep(department) {
  /*
  Since i can't use ajax here let's use a promise.
  */
  var p = new Promise(function(res, rej) {
    setTimeout(function() {
      res(department)
    }, 1000)
  })
  return p;
  // This is what you would actually do.
  /*
  var data =  '{X: "' + department + '"}'
  return $.ajax({
    type: "POST",
    url: "Default.aspx/EmployeesDropDown",
    data: data,
    contentType: "application/json; charset=utf-8",
    dataType: "text json",
  });
  */  
}
function initDepartments(index) {
  reqDep(departments[index])
  // Here you would use `.done(function(data...`
  // I am using `.then(function(data...`
  // because of the promise.
  .then(function(data) {
    console.log(data)
    if(i < departments.length) {
      initDepartments(i)
    }
  })
  i++;
};
initDepartments(i)