Question

代码如下：

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是一个有一个数字的文本框，我希望将该数字增加一秒，直到达到10。问题是inputArea只显示最后一个值10，它应该是...... 7,8,9,10。

Answer 1

您可以使用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" />

Answer 2

你必须使用setTimeout功能。尝试以一秒的增量递归调用它。

更新

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

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

Answer 3

使用setTimeout：

可以轻松完成

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

Answer 4

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

user.php

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

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

这里是fiddle。

JavaScript在while循环中设置输入值

4 个答案: