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

Question

I need to load topics in "for" loop, but the loop is done before the topics start to load. Can someone help me? HTML code is fine, the only problem is jQuery and 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);
    }); 
}

I want the output to be

The X in LOOP is 0
The X in LOAD is 0
The X in LOOP is 1
The X in LOAD is 1
The X in LOOP is 2
The X in LOAD is 2
The X in LOOP is 3
The X in LOAD is 3

But the current output is

The X in LOOP is 0
The X in LOOP is 1
The X in LOOP is 2
The X in LOOP is 3
The X in LOAD is 0
The X in LOAD is 1
The X in LOAD is 2
The X in LOAD is 3

Because the load() function takes a while to load and the loop completes before first load() finishes. Can I make the loop wait until every single load() is completed and then proceed?

Answer 1

You could try creating a recursive function rather than an actual loop which has a call to itself in the .load() callback.

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);

This function will then operate much like a loop except that it will wait until the callback from the .load() before it runs again.

Answer 2

You are trying to force Javascript to work in a syncronous way, while using an jquerys asynchonous load-function.

There is a good reason why you use asyncronous programming in a situation like this: because loading data across the internet takes a very long time compared to all the other steps in your program.

I suggest you don't try to force this program into running in the syncrounous way you are used to. Instead you should try to understand and use asyncronous programming where it is useful. Any good book on Javascript will teach you the basics of this. To delve deeper I recommend Burnham, T. 2012. ASYNC JavaScript: Build More Responsive Apps with Less Code. Pragmatic Bookshelf.