javascript - 从 AJAX 创建时卡住 Bootstrap

Question

实际上，在我的网站中，当打开一个照度时，我会动态填充 Bootstrap ，一旦打开，就会保存数据。

问题是，当我第一次打开它时，它卡住了(因为它必须附加很多 div)并且这触发了我很多，所以我知道我应该如何使其更具可执行性或喜欢哪种方法我应该采取措施防止卡住吗？

AJAX 方法构建如下:

function getBody(body, key) {

    $.ajax({
        type: "POST",
        url: "casse.aspx/getBody",
        data: JSON.stringify({ key: key }),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (r) {

            data = r.d;
            data = $.parseJSON(data);

            $.each(data, function (i, item) {

                var piva = item.piva;
                var desmag = item.desmag;
                var via = item.via;
                var loc = item.loc;
                var servb2b = item.servb2b;
                var idtrabb2b = item.idtrabb2b;
                var matricola = item.matricola;
                var azzer = item.azzer;
                var mac = item.mac;
                var vp = item.vp;
                var vb = item.vb;
                var dr = item.dr;
                var vu = item.vu;
                var cpu = item.cpu;
                var rt = item.giart;
                var datart = item.avviort;

                var card = "";

                card += '<div class="row ml-2 mr-2">';
                card += '<div class="col">';
                card += '<div class="row"><span class="badge badge-primary">Cliente</span></div>';
                card += '<div class="row"><small class="text-muted">P.Iva</small></div>';
                card += '<div class="row"><p class="info">' + piva + '</p></div>';
                card += '<div class="row"><small class="text-muted">Info Negozio</small></div>';
                card += '<div class="row"><p class="info">' + desmag + '</p></div>';
                card += '<div class="row"><small class="text-muted">Via</small></div>';
                card += '<div class="row"><p class="info">' + via + '</p></div>';
                card += '<div class="row"><small class="text-muted">Localita</small></div>';
                card += '<div class="row"><p class="info">' + loc + '</p></div></div>';

                card += '<div class="col">';
                card += '<div class="row"><span class="badge badge-primary">Software</span></div>';
                card += '<div class="row"><small class="text-muted">VisualPos</small></div>';
                card += '<div class="row"><a href="#" class="badge badge-warning">' + vp + '</a></div>';
                card += '<div class="row"><small class="text-muted">VisualB2B</small></div>';
                card += '<div class="row"><a href="#" class="badge badge-warning">' + vb + '</a></div>';
                card += '<div class="row"><small class="text-muted">Driver</small></div>';
                card += '<div class="row"><a href="#" class="badge badge-warning">' + dr + '</a></div>';
                card += '<div class="row"><small class="text-muted">VisualUpdate</small></div>';
                card += '<div class="row"><p class="info">' + vu + '</p></div></div>';

                card += '<div class="col">';
                card += '<div class="row"><span class="badge badge-primary">Fiscale</span></div>';
                card += '<div class="row"><small class="text-muted">Matricola</small></div>';
                card += '<div class="row"><p class="info">' + matricola + '</p></div>';
                card += '<div class="row"><small class="text-muted">Azzeramento Fiscale</small></div>';
                card += '<div class="row"><p class="info">' + azzer + '</p></div>';
                card += '<div class="row"><small class="text-muted">RT</small></div>';
                card += '<div class="row"><p class="info">' + rt + '</p></div>';
                card += '<div class="row"><small class="text-muted">Data Avvio RT</small></div>';
                card += '<div class="row"><p class="info">' + datart + '</p></div></div>';

                card += '<div class="col">';
                card += '<div class="row"><span class="badge badge-primary">Fatturazione Elettronica</span></div>';
                card += '<div class="row"><small class="text-muted">Servizio B2B</small></div>';
                card += '<div class="row"><p class="info">' + servb2b + '</p></div>';
                card += '<div class="row"><small class="text-muted">Trasmittente B2B</small></div>';
                card += '<div class="row"><p class="info">' + idtrabb2b + '</p></div></div>';

                card += '<div class="col">';
                card += '<div class="row"><span class="badge badge-primary">Hardware</span></div>';
                card += '<div class="row"><small class="text-muted">CPU</small></div>';
                card += '<div class="row"><p class="info">' + cpu + '</p></div>';
                card += '<div class="row"><small class="text-muted">MAC</small></div>';
                card += '<div class="row"><p class="info">' + mac + '</p></div></div></div>';

                $(body).find('.card-body').append(card);
            });

        },
        error: function (error) {
            OnFailure(error);
            alert('Error');
        }
    });
}

并在触发相应内容时调用

$('.accordion').on('show.bs.collapse', function (e) {
    var id = $(e.target).attr('id');
    var item = '#' + $(e.target).attr('id');
    if ($(item).find('.card-body').is(':empty')) {
        getBody(item, id);
    } else {

    }

});

Answer 1

在数据加载完成并将数据放入 DOM 后，您将需要手动触发切换。这意味着您需要从 Collapse 中删除 data-target 值并手动添加事件监听器/处理程序。我希望有一个您可以 Hook 的前/后崩溃方面，但没有。

考虑下面的示例，它没有您遇到的延迟。

$("#test-button").click(e => {
  $.ajax({
     url: "https://jsonplaceholder.typicode.com/todos",
     dataType: "json"
  }).done(d => {
    $("#collapseOne .card-body").text(JSON.stringify(d
, null, 4));
    $("#collapseOne").collapse("toggle");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button id="test-button" class="btn btn-link" type="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>
    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body"></div>
    </div>
  </div>
</div>