javascript - 如何在不循环的情况下无限期地执行某些操作，直到满足条件？

Question

每当我使用循环时，选项卡就会崩溃。我似乎不知道如何解决这个问题。我刚开始输入 while(true) {document.getElementById("loadingText").textContent++;}，然后再输入 if(document.getElementById("loadingText").textContent == = "100") {break;} 屏幕卡住并且选项卡崩溃。有人可以帮助我吗？

Answer 1

由于您使用的在线编辑器会根据更改进行实时浏览器更新，因此您需要确保不会无限循环代码。遗憾的是，如果语句中没有代码来打破循环，这就是 while (true) {//code } 所做的事情。

暂时，在您弄清楚该循环的实质之前，只需故意引发错误:

while (i <= 100) { // code }

您可以继续修改，直到获得所需的结果。

您应该考虑一些事情。

1) 您应该缓存该元素一次，这样就不会在每次循环迭代中重复抓取它。

2) textContent 是一个字符串，因此您不能使用 el.textContent++，因为它不会被成功评估。

3)您会发现很难放慢传统循环的速度，以便您可以正确地看到数字增量。

这里有一个使用 setTimeout 而不是传统循环的方法。

// Cache the element
const el = document.getElementById("loadingText");

(function displayNumber(n, end) {

  // Repeat until the iteration number (n)
  // is 10 (for this example)
  if (n <= end) {
    el.textContent = n;

    // Wait 0.5s then call the function again with an increased n
    setTimeout(() => displayNumber(++n, end), 500);
  }

// Pass in the initial number, and the end limit
}(1, 10));

<div id="loadingText"></div>