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

問題は、すべてsetTimeoutの が同時にトリガーされていることです。sを追加するalertと JavaScript の実行が一時停止されるため、各数値が表示されます。それがなければ、1 秒後にすべての 19setTimeoutが (次々に) 実行され、1 つの数字だけが表示されます (画面が非常に高速に更新されるため、1 つの数字だけが表示されます)。

setInterval代わりに使用してみてください。

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

これにより、20になるまで毎秒1回関数が実行されi、その後間隔がクリアされます。

于 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を参照してください。

于 2012-07-24T19:06:34.267 に答える