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

【问题标题】：Can I update DOM while XHR data is loading?我可以在加载 XHR 数据时更新 DOM 吗？
【发布时间】：2018-12-11 19:58:55
【问题描述】：

我正在使用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 滑块的事实只是上下文；我相信这个问题比这更笼统。

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

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

该网站主要是 PHP，所以如果在前端的 JS / jQuery 中没有真正“干净”的方式来处理这个问题，我可以用 PHP ob_flush 做一些服务器端的事情，但只是想先求一些 JS 高手（有意见的）建议/批评。

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

非常感谢;P

【问题讨论】：

为什么你必须为每个项目做一个 xhr？一次得到它们不是更有意义吗？这将有助于提高构建滑块的速度（我认为）
xhr 应该在 each 被调用时已经完成，你可能只是更新循环内的 dom？

标签： javascript jquery ajax slick.js jqxhr

【解决方案1】：

TL:DR;不是一个请求。

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

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

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

【讨论】：

噢！谢谢@phuzi。这是有道理的 - 没有想到这个明显的事实：返回的 JSON 在全部处理完之前将无效。我认为另一种方法（例如缓存到 localStorage）会是更好的方法。