javascript - 强制浏览器立即显示动态生成的内容 block ，而无需等待一次显示所有 block

Question

我正在使用 jQuery 将动态生成的内容 block 列表添加到页面。在我的情况下，生成内容 block 需要一些时间，因此我希望浏览器在添加时立即显示生成的 block ，而不是浏览器一次显示所有生成的 block 。以下是我的 Javascript 代码的概念流程:

var results = $('#results');
var i;
for (i = 0; i < 20; i++) {

  var block = Handlebars-generated-content;
  results.append(block);

  var more = = Handlebars-generated-content;
  block.append(more);

}

当我的页面加载时，浏览器最初是空白的，访问者必须等待，然后所有添加的 block 都会立即显示。我希望浏览器在添加时能够显示一个区 block ，这样访问者就可以立即看到部分内容，而不必等待更长的时间。

Answer 1

原因是您使用的是同步的 for 循环；它将在单个“框架”中运行整个循环以及所有后续内容生成。

相反，您应该使用“异步循环”。这涉及创建一个函数并在每次生成后使用零毫秒 setTimeout() 递归调用它。超时使浏览器有机会进行渲染，以便您的元素更快显示。

var items = ['first', 'second', 'third', 'fourth', 'fifth'];
var index = 0;

function asyncLoop() {
  // get our current item based on the index
  var item = items[index];  
  
  // do your work here
  $('#results').append('<ul>' + item + '</ul>');
  
  // increase the index by 1
  index++;
  
  // keep looping if the index isn't at the end yet
  if (index < items.length) {
    // call ourselves using a timeout to give the browser a change to render
    // intentionally set to 500ms to make this more obvious, set it to 0 normally
    setTimeout(asyncLoop, 500);
  }
}

// start the loop
asyncLoop();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="results">
</ul>

这种方法的唯一缺点是每次超时执行一次生成可能会在操作之间引入额外的延迟，因为在大多数浏览器上超时通常默认为最小约 4 毫秒。为了解决这个问题，您可能需要在每个“循环”中执行一小批操作来优化流程。

还值得注意的是，这不是线程，只是一个异步循环。处理将始终按顺序执行，异步方面只是意味着它不会一次处理所有内容。