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

Question

我正在使用 Slick JS 创建一个滑块，使用 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 数据后，幻灯片已成功添加到滑块。

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

主要问题： 我可以强制 each 循环输出 'html' 而 XHR 数据仍在由 AJAX 加载吗，从而在幻灯片尽快添加到 DOM 时为用户提供性能更高的网站体验？如果是，如何？

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

该站点主要是 PHP，所以如果在前端的 JS / jQuery 中没有真正的 "clean" 方法来处理这个问题，我可以做一些事情服务器端用 PHP ob_flush，但只是想先求助一些 JS 高手（自以为是）suggestions/criticisms。

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

非常感谢;P

Answer 1

TL:DR;不是一个请求。

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

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

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

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

Can I update DOM while XHR data is loading?

javascript

ajax

jquery

jqxhr

slick.js