Question

真的是一个新手问题，但我似乎无法找到答案。我需要让这个html文件显示一堆随机数，间隔1秒。出于某种原因（可能是显而易见的）它只向我显示最后一个，除非我在生成每个随机数后有1个警报。我怎么能纠正这个？

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var randomnumber
var message

function placePossibleWinner()
{
randomnumber=Math.floor(Math.random()*11);
message="Teste ";
message=message.concat(randomnumber.toString());
document.getElementById("WINNER").innerHTML=message;
//alert(".")
}
</script>
</head>

<body>
<script type="text/javascript">
function runDraw()
{
    var i=1
    alert("start")
    while (i<20)
  {
        setTimeout("placePossibleWinner()",1000)
        i++
  }
}
</script>

<h1>H Draw</h1>

<p id="WINNER">Draw</p>
<p></p>
<button onclick="runDraw()">Get me winner!</button>

</body>
</html>

提前感谢您的回答/评论。

Answer 1

问题是所有setTimeout都在同一时间被触发。添加alert会暂停JavaScript执行，因此您可以看到每个数字。没有它，1秒后，所有19个setTimeout运行（一个接一个），你只看到一个数字（屏幕更新得如此之快，你只看到一个）。

请尝试使用setInterval。

function runDraw() {
    var i = 1;
    var interval = setInterval(function(){
        if(i < 20){
            placePossibleWinner();
            i++;
        }
        else{
            clearInterval(interval);
        }
    }, 1000);
}

这将每秒运行一次函数，直到i为20，然后它将清除间隔。

Answer 2

我相信你想要setInterval。在循环中使用setTimeout将立即排队20个呼叫，并且它们将在1秒后立即触发。此外，您要设置innerHTML的{{1}}，这将覆盖之前的任何文字。

Answer 3

您正在重置函数中的消息，并且您正在以错误的方式调用placePossibleWinner（）...您想要使用setInterval。以下是对html / javascript的修改

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
    var randomnumber;
    var message = "Teste ";
    var timesCalled = 0;
    var funtionPointer;

    function placePossibleWinner()
    {
        timesCalled++;
        randomnumber=Math.floor(Math.random()*11);
        message=message.concat(randomnumber.toString());
        document.getElementById("WINNER").innerHTML=message;
        if (timesCalled > 20)
        {
         clearInterval(functionPointer);
        }
     }
</script>
</head>

<body>
<script type="text/javascript">
    function runDraw()
    {
        var i=1
        alert("start")
        functionPointer = setInterval(placePossibleWinner,1000)
    }
</script>

<h1>H Draw</h1>

<p id="WINNER">Draw</p>
<p></p>
<button onclick="runDraw()">Get me winner!</button>

</body>
</html>

Answer 4

首先，

setTimeout("placePossibleWinner()",1000)

应该是

setTimeout(placePossibleWinner,1000)

setTimeput的参数应该是对函数的引用。见JavaScript,setTimeout

在javascript中将随机数的序列写入段落

4 个答案: