javascript - 带有循环的奇怪 AJAX 行为

Question

我有一对行为不正确的嵌套 AJAX 请求。 第一个获取 albums 列表，第二个获取每个专辑的执行，给我一个 tracks 列表。

$.ajax({
    url:getPHPSite(),
    method:"POST",  
    data:{
        query: "SELECT id_album FROM albums;"
    },
    success: function(response){
      var albums=JSON.parse(response);
      for(var i=0; i<albums.length;i++){
          var albumID=albums[i]['id_album'];
             getTracks(function(courses) {
              //do something
            }
            }, albumID);


        }  
    }, ....//error handler and everything else

getTracks() 函数实际上执行第二个 AJAX 请求并返回一个轨道数组，带有一个回调

function getTracks(callback, albumID){
    $.ajax({
        url:getPHPSite(),
        method:"POST",   
        data:{
            query: "SELECT idtracks FROM tracksWHERE id_album=" + albumID + ";"
        },


        success: function(response){
            array_tracks=JSON.parse(response);   
            callback(array_tracks);
        }, //...everything else

通过打断点，我发现第一个for循环是单独执行的

albumID=1
albumID=2
albumID=3
...end

然后才执行 getTracks()。

我希望对专辑的每次迭代执行 getTracks()。

为什么会发生这种情况，我该如何解决？

Answer 1

如果您在使用 Javascript 异步方式时遇到问题，您可以使用 async: false 标志禁用 http://api.jquery.com/jquery.ajax/#jQuery-ajax-settings ，但你会失去 javascript 的力量。

我认为可以做到这一点的方法之一是创建一个数组，其中包含第一个端点的所有结果 ID，然后对该数组执行 foreach，而不是将 ajax 嵌入到 ajax 中，但这只是为了代码的可维护性。