JavaScript的每个循环中等待，直到进程完成AJAX

for (var i = 0; i < theTagNames.length; i++) { 
    var url = baseURL + "?" + 
     "jsoncallback=?" + 
     "&method=flickr.photosets.getPhotos" + 
     "&format=json" + 
     "&api_key=" + api + 
     "&photoset_id=" + theTagNames[i].id; 
    tagID = theTagNames[i].id; 
    console.log('for: ' + i) 

    $.getJSON(url, {}, function (data) { 
     tmpSetName = theTagNames[tmpi].title._content; 
     category = theTagNames[tmpi].description._content; 
     tmpi += 1; 
     keepTrack = 0; 

     $.each(data.photoset.photo, function (z, item) { 
      if (i == limit) return false; 
      console.log('each: ' + z) 

      var thumbURL = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_s.jpg'; 
      var largeURL = thumbURL.replace('_s.jpg', '_b.jpg'); 

      keepTrack = z 

      if (keepTrack == 0) { 
       $('#flickrImages').append('<div style="float: left;background-color: #102C53; color: #fff; width: 690px; text-align:left; font-weight: bold; padding: 3px;" id="title' + tmpSetName + '">' + tmpSetName + 
        '<span id="span' + tmpSetName.replace(/ /g, '_') + '" style="cursor: pointer; float: right;" onclick="clickedTitle(this);">' + 
        ' [Start Slideshow]' + 
        '</span>' + 
        '</div>'); 
      } 

      if (keepTrack <= (displayLimit - 1)) { 
       $('#flickrImages').append('<span align="left" style="float: left;" id="imgDiv">' + 
        '<a style="outline: none;" rel="' + tmpSetName.replace(/ /g, '_') + '" title="" href="' + largeURL + '" id="imgLink' + tmpSetName.replace(/ /g, '_') + i + '">' + 
        '<img id="img' + i + '" src="' + thumbURL + '" style="border: 1px solid #102C53; margin: 3px;" alt="' + tmpSetName + '" />' + 
        '</a>' + 
        '</span>'); 
      } else if (keepTrack == (displayLimit + 1)) { 
       showMoreImages = true; 
      } else { 
       $('#flickrImages').append('<span align="left" style="float: left; display: none; visibility: hidden;" id="hidden' + tmpSetName.replace(/ /g, '_') + '">' + 
        '<a style="outline: none;" rel="' + tmpSetName.replace(/ /g, '_') + '" title="" href="' + largeURL + '" id="imgLink' + tmpSetName.replace(/ /g, '_') + i + '">' + 
        '<img id="img' + i + '" src="' + thumbURL + '" style="border: 1px solid #102C53; margin: 3px;" alt="' + tmpSetName + '" />' + 
        '</a>' + 
        '</span>'); 
      } 
     }); 
    }); 
} 
}

Currenlty上面的代码工作，但是当我刷新页面也容易得到图像乱序（错误标题有与该标题进入图像&也是错误的图像）。由于$。每个可能有超过50 +图像获得每theTag名称似乎越来越超前自己。JavaScript的每个循环中等待，直到进程完成AJAX

有时它以正确的顺序，但往往不是。

是否有可能暂停为（VAR I = 0;我< theTagNames.length;我++）{直到$。每个所有图像已被发现并appened到flickrImages DIV？

来源

2013-10-11 StealthRT

未捕获ReferenceErrors：极限，displayLimit没有定义 – dezman

@watson：displayLimit = 16，上限= 99 – StealthRT

您应该将整个$.getJSON(url, {}, function (data) { ...放在for循环之外的单独函数中，然后传入i否则i的值将随着您的异步情况而变化。

此外，您应该使用不同的变量名称作为$ .each函数的索引参数。

所以您的代码会是这个样子：

for (var i = 0; i < theTagNames.length; i++) { 
    // stuff 
    getFlkrJSON(data, i); 
} 

function getFlkrJSON(data, i){ 
    $.getJSON(url, {}, function (data) { 
     //stuff 
    } 
}

来源

2013-10-11 15:15:02 dezman

如果我把**的console.log（” for：和+ ** console.log（'each：'+ i）; **在$ .each中，我期望看到它的输出** for：0，each：0 ，每个：1，每个：xx ... for：1，每个：0，每个：1，每个：xx ... **但它是这样的：** for：0，for：1，for：xx。 ..，每个：0，每个：1，每个：xx ... ** – StealthRT

我真的不明白你想说什么，但是你绝对不应该在两个循环中使用相同的变量名。 – dezman

我用我正在谈论的console.log更新了我的OP。我也改变了** $。每个“我”**到z，所以它不会与for循环中的i发生冲突。 – StealthRT

JavaScript的每个循环中等待，直到进程完成AJAX

回答

相关问题