javascript - 我可以在加载 XHR 数据时更新 DOM 吗？

Question

我正在使用 Slick JS创建一个 slider ，使用 AJAX 和 slickAdd 方法向其添加幻灯片，如下所示:

$.getJSON(url, function(r) {
  $.each(r, function(i, article) {
    var html = 'HTML string created with data and ' + article.variables +  ' from JSON';
    $('.element').slick('slickAdd', html);
  }
}

此 AJAX 有效，在浏览器拥有所有 XHR 数据后，幻灯片已成功添加到 slider 。

它是一个 Slick JS slider 的事实只是上下文；我相信这个问题比这更笼统。

主要问题:当 XHR 数据仍​​在由 AJAX 加载时，我能否强制 each 循环输出“html”，从而为用户提供一个性能更高的站点，因为幻灯片会尽快添加到 DOM 中？如果是，如何？

当函数循环遍历“每个”时，我可以看到返回的每个项目的离散 XHR 数据，理想情况下，我希望在所有迭代完成之前开始添加到 DOM(有延迟)。

该站点主要是 PHP，所以如果在前端的 JS/jQuery 中没有真正“干净”的方法来处理这个问题，我可以在服务器端使用 PHP ob_flush ，但只是想先求一些 JS 高手(自以为是)的建议/批评。

我不一定需要完整的代码示例，只需要一个高级解释 - 我只是对 JS 有点菜鸟。

非常感谢;P

Answer 1

长话短说:博士；不是一个请求。

如果您要使用底层 XMLHttpRequest 对象来执行 AJAX 请求，您将能够在数据从服务器返回时获得更新，并可能在加载数据时执行更新.

但是，这样做的明显问题是，JSON 在完全加载之前不会有效。虽然您可以手动解析它，但这样做不太值得。

做你想做的唯一解决方法是为每个数据 block 发送单独的请求并单独处理它们。