如何在循环体内往div里追加内容

Question

<p class="tips-error"></p>


  var responseEl = $(".tips-error");
  responseEl.html();
  responseEl.append(">>> 开始批量创建... <br/>");
  for (let index = 0; index < 300; index++) {

    setTimeout(function() {
        responseEl.append(">>> 开始批量..."+index+" <br/>");
      }, 5e3);

  }

现在有一个盒子
for 里面处理一些逻辑（比如 ajax）
现在希望可以做到这样一个效果

程序开始执行的时候 先在页面输出 >>> 开始批量创建...

接着开始输出 >>> 开始批量...0 到页面

接着开始向页面输出 >>> 开始批量...1
以此类推 。。。

但是现在的效果是 程序在执行直到循环结束才一下子输出到页面
这样很不友好

求万能的网友给个思路！！！

Answer 1

用setInterval

let responseEl = $(".tips-error"),
            i = 0;
        responseEl.html();
        responseEl.append(">>> 开始批量创建... <br/>");
        let timeI = setInterval(() => {
            i++;
            responseEl.append(">>> 开始批量..." + i + " <br/>");
            if (i > 3) {
                clearInterval(timeI);
            }
        }, 1000);

Answer 2

https://baijiahao.baidu.com/s...