如何实现评论列表显Loading、逐次渲染保序且加载失败置空

核心实现要求 #

• 页面加载阶段comment-list容器先展示「Loading...」提示
• 评论数据请求成功后按原有顺序逐次渲染展示
• 数据请求出错时容器留空，不展示多余内容

现有代码缺陷 #

• 评论数据返回后一次性批量插入DOM，无法实现逐次出现效果
• 错误回调中直接调用接口返回数据的遍历方法，会触发代码异常
• 错误场景未按要求留空容器，存在冗余错误提示逻辑

完整实现代码 #

HTML代码 #

<!DOCTYPE html>
<html>
    <head>
        <title>Render Comments</title>
        <!-- 兼容HTTPS站点可使用无协议链接：//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    </head>
    <body>
        <div class="comment-list" data-count=1></div>
        <script type="text/javascript" src="./app.js"></script>
    </body>
</html>

JS代码 #

"use-strict";

var commentList = $(".comment-list");
var count = $(".comment-list").data("count");
var url = "https://jsonplaceholder.typicode.com/comments?postId=" + count;
// 自定义逐条渲染的间隔时间，单位为毫秒
var RENDER_GAP = 300;

$.ajax({
  url: url,
  method: "GET",
  beforeSend: function () {
    commentList.html("Loading...");
  },
  success: function (data) {
    commentList.empty();
    let renderIndex = 0;
    // 定时器控制逐次渲染
    const renderTimer = setInterval(() => {
      // 所有评论渲染完成后清除定时器
      if (renderIndex >= data.length) {
        clearInterval(renderTimer);
        return;
      }
      const currentComment = data[renderIndex];
      commentList.append(`
           <div class="comment-item">
              <div class="comment-item__username">${currentComment.id}</div>
              <div class="comment-item__message">${currentComment.name}</div>
          </div>`);
      renderIndex++;
    }, RENDER_GAP);
  },
  error: function () {
    // 请求出错时清空容器留空
    commentList.empty();
  },
});

参数调整说明 #

可通过修改RENDER_GAP的数值调整评论逐次出现的间隔，数值越小渲染速度越快。

内容的提问来源于stack exchange，提问作者Venkat Sai