Ajax循環html輸出 - 引導標籤

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

你已經在使用的承諾，所以這裏的技巧是，你需要捕獲所有這些承諾和你的循環使用$.when之外後，所有的承諾已完成了纔會發生。這應該讓你開始：

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