Question

我有一个网站对JSON数据发出HTTP请求，然后回调函数处理数据并通过动态创建一系列div来显示它。我想要做的是等待该函数完成将div添加到页面，然后仅将标签应用于由前一代码创建的特定div。

HTTP请求和回拨

function data(callback){
    var url = //request url;
    var request = new XMLHttpRequest();
        request.onreadystatechange = function() {
            if (request.readyState === 4) {
                if (request.status === 200) {
                    document.body.className = 'ok';
                    //Parse returned string into an object, then pass the object to the callback function.
                    var data = JSON.parse(request.responseText);
                    callback(data);
                } else {
                    document.body.className = 'error';
                }
            }
        };
    request.open("GET", url , true);
    request.send(null);
}
function dataDisplay(data){
    //outputs <div id="1064" class="displayed-data">
                  <p id="message1" class="hidden"></p>
}
data(dataDisplay);

上面的代码显示了我想要的数据，但是当我尝试访问我想要更改的div的编号ID时，该功能会在页面上显示数据之前运行，从而导致＆＃39 ;空＆＃39;错误，因为我尝试更改的数据尚未添加到DOM中。

第二个更改原始内容的功能

function label(){
    var message1 = document.createTextNode('//some label');
    var displayedData = document.getElementById('1064').getElementById('message1');
    displayedData.appendChild(message1);
    document.getElementById('message1').classList.remove('hidden');
}

在尝试访问和更改回调之前，如何让第二个函数等到回调完成？我在回调中尝试了一个回调，类似于：label(data(dataDisplay));，但它仍然抛出相同的错误，所以我显然做错了。对不起，我是JavaScript新手，并不知道从哪里开始。

感谢您的帮助！

Answer 1

使用此内联函数可以非常快速地完成此操作。

data(function(result) {
  dataDisplay(result);
  label();
});

请注意，您的data函数本身会很快完成 - 如果您需要其结果中的某些内容，则需要将其包含在其回调中。

如何在加载javascript后更改动态创建的元素

1 个答案: