While 循环和 setInterval()

Question

我正在尝试混合初始字符串并随机比较字符串的元素与正确索引上的正确元素，如果为真，则将它们推入一个集合，以重建初始字符串。这样做我遇到了一个问题，即 while 循环什么都不做，只会破坏浏览器。帮我解决这个问题。

function checker() {
  var text = document.getElementById("inp").value;
  var a = [];
  var i = 0;

  while (a.length < text.length) {
    var int = setInterval((function() {
      var rnd = Math.floor(Math.random() * text.length);
      if (text[rnd] === text[i]) {
        a.push(text[rnd]);
        clearInterval(int);
        i++;
      }
    }), 100)
  }
}

P.S。我需要 setInterval() 函数，因为我需要该过程在完全相同的时间段内发生。

Answer 1

老实说，我不知道你想在这里做什么，但你似乎忘记了你的代码是如何运行的。

您的 while 循环所做的就是创建间隔，它与循环本身运行异步。换句话说，while 条件等同于 false 的唯一方法是 是在经过多个 100 毫秒间隔后 。与 1 个循环迭代的速度相比，100 毫秒是永恒的。在您的第一个 setInterval 甚至触发之前，我们正在查看 1000 次迭代，这不是浏览器可以跟上的，更不用说在您更改 a.length.

之前等待几个这样的间隔了

试试这样：

function checker() {
  var text = document.getElementById("inp").value;
  var a = [];
  var i = 0;

  // start to do a check every 100ms.
  var interv = setInterval(function() {
      var rnd = Math.floor(Math.random() * text.length);
      if (text[rnd] === text[i]) {
        a.push(text[rnd]);
        i++;
      }

      // at the end of each call, see if a is long enough yet
      if(a.length > text.length){
        clearInterval(interv); // if so, stop this interval from running
        alert(a); // and do whatever you need to in the UI.
      }
    }, 100);
  }
}

Answer 2

所以，您陷入了大多数人在接触异步编程时遇到的陷阱。

您无法 "wait" 完成 timeout/interval - 尝试这样做不会成功或阻止整个 page/browser。任何在延迟后应该运行的代码都需要从你传递给 setInterval 的回调中调用，当它是 "done".

时

在我的回答中，它完全按照您的意愿行事 - 通过随机混合首字母并使用 setInterval 创建完全相同的字符串。你没有写在你想要结果的地方，所以你把它写在控制台和另一个 ID 为 output_string.

的输入字段中

HTML:

<input id="input_string" value="some_text" />
<input id="output_string" value="" readonly="readonly" />

JavaScript:

function checker() {
    var text = document.getElementById("input_string").value;
    var result = '';

    // split your input string to array
    text = text.split('');

    var int = setInterval((function() {
        var rnd = Math.floor(Math.random() * text.length);

        // add random character from input string (array) to the result
        result += text[rnd];

        // remove used element from the input array
        text.splice(rnd, 1);

        // if all characters were used
        if (text.length === 0) {
            clearInterval(int);

            console.log(result);

            document.getElementById("output_string").value = result;
        }
    }), 100);
}

checker();

DEMO

While 循环和 setInterval()

While loop and setInterval()

javascript

while-loop

setinterval