While loop and setInterval()

While loop and setInterval()

本文关键字：setInterval and loop While      更新时间：2023-09-26

我试图混合初始字符串，并随机比较字符串的元素与正确索引上的正确元素，如果是真的，将它们推入一个集合，以重建初始字符串。这样做时，我遇到了一个问题，即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()函数，因为我需要这个过程在完全相同的时间段内发生。

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

你不能"等待"一个超时/间隔来完成-尝试这样做将不起作用或阻塞整个页面/浏览器。任何应该在延迟之后运行的代码都需要在"完成"时从传递给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();

老实说，我不知道你在这里想做什么，但你似乎已经失去了你的代码是如何准确操作的跟踪。

while循环所做的就是创建interval，它从循环本身异步运行。换句话说，while条件等于false， 的唯一方法是在多个100ms间隔经过之后。与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);
  }
}
相关文章：