没有先前警告消息的 JavaScript 变量为空

Question

我正在使用以下函数从 JSON 文件创建链接列表并将它们放入 span 元素中(jquery 已初始化)

$(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"); 

});

但是，如果我这样使用它，span 元素将保持为空。只有当我更换

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

与

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

我得到了想要的输出。如何在不事先打印出警告消息的情况下获取它？

Answer 1

那是因为 .getJSON() 是一个异步方法。在服务器有时间响应请求之前，您的代码将尝试使用内容更新 DOM。因此没有插入内容。

有了警报，您可以停止执行足够长的时间让服务器做出响应，因此在您添加警报时它会起作用。

正确的做法是将内容更新移至成功回调中，它始终在服务器响应后运行:

$.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);
}); 

我用相对较短的 jQuery 等价物 $("#list_"+ category).html(content ); 在上面的例子中也是如此。