1

真的是一个新手问题，但我似乎找不到答案。我需要让这个 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>

提前感谢您的任何答案/评论。

4

4 回答 4

2

问题是您的所有setTimeouts 都同时被触发。添加alerts 会暂停 JavaScript 执行，因此您会看到每个数字。没有它，1 秒后，所有 19 setTimeouts 运行（一个接一个）并且您只看到一个数字（屏幕更新如此之快，您只看到一个）。

尝试setInterval改用。

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

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

于 2012-07-24T19:11:10.770 回答
2

我相信你想要setInterval的。在循环中使用setTimeout只会立即排队 20 个调用，它们将在 1 秒后立即触发。此外，您正在设置的innerHTML将p覆盖任何以前的文本。

function placePossibleWinner() {
    // add a var here, implicit global
    var randomnumber=Math.floor(Math.random()*11);

    // add a var here, implicit global
    message="Teste " + randomnumber + '\n'; // new line

    document.getElementById("WINNER").innerHTML += message; // concat, don't assign
}

function runDraw() {
    var counter = 1;
    var intervalID = setInterval(function () {
        if (counter < 20) {
            placePossibleWinner();
            counter++;
        } else {
           clearInterval(intervalID);
        }
    }, 1000);
}
于 2012-07-24T19:14:29.717 回答
1

您正在重置函数中的消息，并且以错误的方式调用 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>
于 2012-07-24T19:19:43.730 回答
0

首先，

setTimeout("placePossibleWinner()",1000)

应该

setTimeout(placePossibleWinner,1000)

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

于 2012-07-24T19:06:34.267 回答