使用ajax更新元素在for循环结束之前不会产生影响

Question

我想用 AJAX 逐一打印很多数字。

像这样：（每一行都是上一行的更新！）

output is:
    1
    12
    123
    1234
    12345
    123456
    ...

我尝试了很多并阅读了很多相同的问题，但我找不到正确的答案。

真正的问题是javascript中的每个FOR LOOP在结束循环后都不会影响DOM。我只想在处理长时间运行的工作时更新 FOR LOOP 内的 DOM。

请看我的代码。

output is:
    1
    12
    123
    1234
    12345
    123456
    ...

$("#btn").on("click", dowork);

function dowork() {
  document.getElementById("foo").innerHTML = "working";
  setTimeout(function() {
    var counter = 100; // i want assign counter = 2000000000
    for (var i = 0; i < counter; i++) {
      document.getElementById("print_here").innerHTML += i;
    }
    document.getElementById("foo").innerHTML = "done!";
  }, 50);
}

#btn {
  background: #1f1f1f;
  padding: 10px;
  font-weight: bolder;
  color: #fff;
  width: 50%;
  margin: auto;
  margin-top: 10px;
  text-align: center;
  cursor: pointer;
}

#print_here {
  overflow-wrap: break-word;
}

感谢您提供任何答案并帮助解决此问题。

Answer 1

您的 DOM 在更新和重绘时被“锁定”，循环完成。每次将 DOM 更改包装在 a 中时setTimeout，您可以释放资源以让 DOM 更新，类似于：

setTimeout(function(){
    document.getElementById("print_here").innerHTML += i;
},1);

确保setTimeout使用正确的值用于iuselet i而不是var i

setTimeout(function(){
    document.getElementById("print_here").innerHTML += i;
},1);

$("#btn").on("click", dowork);

function dowork() {
  document.getElementById("foo").innerHTML = "working";

  var counter = 3000; // i want assign counter = 2000000000
  for (let i = 0; i < counter; i++) {
    setTimeout(function() {
      document.getElementById("print_here").innerHTML += i;
    }, 1);
  }
  document.getElementById("foo").innerHTML = "done!";
}

#btn {
  background: #1f1f1f;
  padding: 10px;
  font-weight: bolder;
  color: #fff;
  width: 50%;
  margin: auto;
  margin-top: 10px;
  text-align: center;
  cursor: pointer;
}

#print_here {
  overflow-wrap: break-word;
}

我想将 #foo 更改为“完成！” FOR 语句结束后

您可以检查您是否在 中处理的最后一个项目setTimeout，类似于：

if (i == counter - 1){
    document.getElementById("foo").innerHTML = "done!";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="btn">CLICK TO DO WORK</div>
<div id="foo"></div>
<div id="print_here"></div>

if (i == counter - 1){
    document.getElementById("foo").innerHTML = "done!";
}

$("#btn").on("click", dowork);

function dowork() {
  document.getElementById("foo").innerHTML = "working";

  var counter = 3000; // i want assign counter = 2000000000
  for (let i = 0; i < counter; i++) {
    setTimeout(function() {
      document.getElementById("print_here").innerHTML += i;
      if (i == counter - 1){
        document.getElementById("foo").innerHTML = "done!";
      }
    }, 1);
  }
}