JavaScript variable empty without previous alert messge

问题

I'm using the following function to create a list of links from a JSON-File and put them into a span element (jquery has been initialized)

$(document).ready(function() {

function createjson(category) {
        var content = "";
    i = 0;
    $.getJSON(category + ".txt", function(data){
        while(data[i] != null) {
            content = content + '<li class="liste"><a target="_blank" class="liste" href="' + data[i].url + '">' + data[i].name + '</a></li>';
            i++;
        }

    }); 
    document.getElementById("list_" + category).innerHTML = content;
}

createjson("cat1"); 

});

However, if I use it like this, the span element remains empty. It is only when I replace

document.getElementById("list_" + category).innerHTML = content;

with

alert("test");
document.getElementById("list_" + category).innerHTML = content;

that I get the desired output. How can I get it without printing out an alert message beforehand?

回答1:

Put the html append in callback, also reset the i when call back starts.

$(document).ready(function() {

function createjson(category) {

    $.getJSON(category + ".txt", function(data)
    {
        var content = "";
        for(i=0; i<data.length; i++)
        {
            content = content + '<li class="liste"><a target="_blank" class="liste" href="' + data[i].url + '">' + data[i].name + '</a></li>';
        }
        document.getElementById("list_" + category).innerHTML = content;
    }); 

}

createjson("cat1"); 

});

回答2:

That is becuase .getJSON() is an asynchronous method. Your code will try to update the DOM with content, before the server had time to respond to the request. Therefor no content is inserted.

With the alert, you stop the execution long enough for the server to respond, therefor it works when you add the alert.

The correct way to do it would be to move your content update into the success-callback instead, which is always run after the server has responded:

$.getJSON(category + ".txt", function(data){
    while(data[i] != null) {
        content = content + '<li class="liste"><a target="_blank" class="liste" href="' + data[i].url + '">' + data[i].name + '</a></li>';
        i++;
    }

    $("#list_" + category).html(content);
});

I replaced your document.getElementById("list_" + category).innerHTML = content; with the somewhat shorter jQuery equivalent $("#list_" + category).html(content); in the above example as well.

回答3:

It's not the alert which is fixing this, the alert is basically blocking the UI for long enough for the AJAX request to complete.

$.getJSON is an asyncronous method. This means that the result of the function call is not always available immediately, you'll need to move your code which sets the list element HTML inside the $.getJSON callback:

$.getJSON(category + ".txt", function (data) {
    while(data[i] != null) { ... }
    document.getElementById("list_" + category).innerHTML = content;
});

回答4:

Use this !== to compare with not equal to NULL

 while(data[i] !== null) {
            content = content + '<li class="liste"><a target="_blank" class="liste" href="' + data[i].url + '">' + data[i].name + '</a></li>';
            i++;
        }

来源：https://stackoverflow.com/questions/13306067/javascript-variable-empty-without-previous-alert-messge

标签

javascript

json

alert

output