JavaScript 在 while 循环中设置输入值

JavaScript set input value in while loop

本文关键字：设置 输入 循环 while JavaScript      更新时间：2023-09-26

代码如下：

v1 = document.getElementById('double').value;
while (v1 < 10) {
    v1++;               
    now = new Date().getTime();
    while(new Date().getTime() < now + 1000){}
    document.getElementById('inputArea').value = v1;
}

inputArea 是一个有一个数字的文本框，我想将该数字每秒增加 1 秒，直到达到 10。问题是输入区域仅显示最后一个值 10，它应该是....7， 8， 9 10.

您可以使用

setInterval 

var timerId = setInterval(function(){
  v1 = parseInt(document.getElementById('double').value,10);
  if(v1 == 10){
    clearInterval(timerId)
  }
  else{
    document.getElementById('double').value = (v1+1)
  }
},1000);
<input id="double" value="1" />

首先，您需要在 while 循环中移动值更新：

v1 = document.getElementById('double').value;
while (v1 < 10) {
    v1++;               
    now = new Date().getTime();
    while(new Date().getTime() < now + 1000) {
        document.getElementById('inputArea').value = v1;
    }
}

为了回答您评论中的问题，它似乎在 while 循环中不起作用的原因（除了上述内容）是因为循环不断应用值更新，而不是给浏览器窗口更新的机会。 使用 setInterval 可以避免这种情况。

无论如何，如果你想看到上述工作，你可以暂停 while 循环的执行，比如警报 - 这应该给窗口一个更新的机会。

这是一个小提琴。

你必须

使用setTimeout函数。尝试以一秒为增量递归调用它。

更新：

setInterval 可能会更好，因为这样你就不需要处理递归调用了。尝试类似于下面的代码：

v1 = document.getElementById('double').value;
var intervalId = setInterval(function() { 
  v1++;
  document.getElementById('inputArea').value = v1;
  if(v1 === 10) clearInterval(intervalId);
}, 1000);

可以使用setTimeout非常简单地完成：

setTimeout(function repeat(i){
   document.getElementById('inputArea').value = i;
   if(i < 10) setTimeout(repeat, 1000, i++);
}, 1000, Number(document.getElementById('double').value));
相关文章：