javascript - Ajax 循环用于 html 输出 - Bootstrap 选项卡

Question

我想检索多个 json 文件并将每个文件的数据放入 Bootstrap 3 选项卡中。我意识到 getJSON 调用在数据附加到函数末尾之前没有完成，但我不太了解回调。当我将 html 添加到变量(如下例所示)时，如何设置回调？

function loadTabs(p){
    var htmlTabs = '<ul class="nav nav-tabs" role="tablist">';
    var htmlContent = '<div class="tab-content">';

    for (var i = 1; i <= p; i++) {
        if (i == 0){
            htmlTabs += '<li class="active"><a href="'+i+'" role="tab" data-toggle="tab">'+i+'</a></li>';
            htmlContent += '<div class="tab-pane active" id="'+i+'">';
        }
        else {
            htmlTabs += '<li><a href="#'+i+'" role="tab" data-toggle="tab">'+i+'</a></li>';
            htmlContent += '<div class="tab-pane" id="'+i+'">';
        }
        (function(i) {
            $.getJSON('sampleFile_0' + i + '.json', function(data) {})
            .done(function(data){
                htmlContentnt += '<div class="table-responsive"><table class="table">'
                    for (j = 0; j < data.length; j++) {
                        if (ttid == data[j].tid){
                            htmlContent += '<tr><td>' + data[j].cl + '</td></tr>';
                        }
                        else if (otid == data[j].tid){
                            htmlContent += '<tr><td>' + data[j].cl + '</td></tr>';
                        }
                    }
                htmlContent += '</table>';
            })
        })(i);
        htmlContent += '</div>';
    };

    htmlTabs += '</ul>';
    htmlContent += '</div>';

    $('#block').append(htmlTabs + htmlContent);
}

Answer 1

您已经在使用 Promise，因此这里的技巧是您需要捕获所有这些 Promise，并在循环之外使用 $.when仅在所有 promise 完成后才会发生。这应该可以帮助您开始:

 var promises = [];

 for (var i = 1; i <= p; i++) {
    if (i == 0){
        htmlTabs += '<li class="active"><a href="'+i+'" role="tab" data-toggle="tab">'+i+'</a></li>';
        htmlContent += '<div class="tab-pane active" id="'+i+'">';
    }
    else {
        htmlTabs += '<li><a href="#'+i+'" role="tab" data-toggle="tab">'+i+'</a></li>';
        htmlContent += '<div class="tab-pane" id="'+i+'">';
    }
    (function(i) {
        promises.push($.getJSON('sampleFile_0' + i + '.json')
        .done(function(data){
            htmlContentnt += '<div class="table-responsive"><table class="table">'
                for (j = 0; j < data.length; j++) {
                    if (ttid == data[j].tid){
                        htmlContent += '<tr><td>' + data[j].cl + '</td></tr>';
                    }
                    else if (otid == data[j].tid){
                        htmlContent += '<tr><td>' + data[j].cl + '</td></tr>';
                    }
                }
            htmlContent += '</table>';
        }));
    })(i);
    htmlContent += '</div>';
};

...
$.when.apply($, promises).done(function(){
   $('#block').append(htmlTabs + htmlContent);
});