jQuery如何使循环等到load（）完成

Question

我需要在“ for”循环中加载主题，但是循环是在主题开始加载之前完成的。 有人能帮我吗？ HTML代码很好，唯一的问题是jQuery和Javascript。

var newTop = $("#invisForum").find('a:not(:has(span))'); //find every link which does not include span
var odkazy = new Array();
for (var i = 0; i < noveTop.length; i++) {
     odkazy[i] = $(noveTop[i]).attr('href'); //get the href attribute from every link
}

if (odkazy.length!=0){
   $("#unreadForum").css("visibility","visible"); //if there is any link, make table for links visible
}

for (var x = 0; x < odkazy.length; x++) {
    alert("The x in LOOP is "+ x);
    $("#spravneOdkazy").load(odkazy[x]+' td[style="white-space:normal;"]',function(){  
        topicy = $("#spravneOdkazy").find("td").find('img[alt="Uzavřeno"]');
        if (topicy.length>0){
             $("#unreadTable").find("tbody").append("<tr><th>"+$("#invisForum").find("span:nth-child("+x+")").text()+"</th></tr>");      
        }
        for (var y = 0; y < topicy.length; y++) {
             $(topicy[y]).parent().find("img").css("vertical-align","middle");        
             $("#unreadTable").find("tbody").append("<tr><td>"+$(topicy[y]).parent().html()+"</td></tr>");
        }
       alert("The X in LOAD is " +x);
    }); 
}

我希望输出是

LOOP中的X为0
LOAD中的X为0
LOOP中的X为1
LOAD中的X为1
LOOP中的X为2
LOAD中的X为2
LOOP中的X为3
LOAD中的X为3

但是目前的输出是

LOOP中的X为0
LOOP中的X为1
LOOP中的X为2
LOOP中的X为3
LOAD中的X为0
LOAD中的X为1
LOAD中的X为2
LOAD中的X为3

因为load()函数需要一段时间才能加载，并且循环在第一个load（）完成之前完成。 我可以让循环等到每个load()完成之后再继续吗？

Answer 1

您可以尝试创建一个递归函数，而不是在.load（）回调中调用自身的实际循环。

function loop(array,x){

    if( isNaN(x) ) x = 0;

    console.log("loop: "+x);

    $("element").load(array[x],function(){

        console.log("load: "+x);

        //Do your stuff here

        if( array.length > x+1 ) loop(array,x+1);

    });

}

var array = ["link1","link2","link3"];
loop(array);

然后，此函数将像循环一样工作，不同之处在于它将等待直到.load（）的回调才再次运行。

Answer 2

您正在尝试使用JavaScript异步加载功能时强制Javascript以同步方式工作。

在这种情况下使用异步编程是有充分的理由的：因为与程序中的所有其他步骤相比，通过Internet加载数据需要很长时间。

我建议您不要强迫该程序以您惯用的方式运行。 相反，您应该尝试在有用的地方理解和使用异步编程。 任何有关Javascript的好书都会教给您有关此方面的基础知识。 为了更深入地研究，我推荐Burnham，T.2012。ASYNC JavaScript：用更少的代码构建更多响应式应用程序。 实用的书架。