javascript - 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)
  }
}

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

Answer 1

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

您不能“等待”超时/间隔完成 - 尝试这样做不会起作用或阻止整个页面/浏览器。延迟后运行的任何代码都需要在“完成”时从传递给 setInterval 的回调中调用。

在我的回答中，它完全按照您想要的方式进行 - 通过随机混合初始值并使用 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