在setTimeout作业完成之前，不会显示Bootstrap Modal

Question

在setTimeOut中的作业完成之前，不会显示Bootstrap模式。

$('#myModal').modal('show');

items = 10
for (let i = 0; i < items; i++) {
    setTimeout(() => {

        // This line is to delay the count for doing a loading job.
        var timeAfterSecond = new Date().getTime() + 1000;
        while(new Date().getTime() < timeAfterSecond ){}

        console.log('Fired after 1 sec');
        console.log(i);
    }, 0);
}

<div class="modal" tabindex="-1" id="myModal" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

我想在最后一步中在模式中显示一个百分比。但是模式最初不会显示。

Answer 1

在模式打开时使用Bootstrap模式事件，如：

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})