33

Javascriptで秒数をカウントダウンしようとしています。

ここに私のHTMLがあります

<div id="ban_container" class="error center">Please wait
        <span id="ban_countdown" style="font-weight:bold">
        45</span>
        seconds before trying again
</div>

そして私のJS：

<script type="text/javascript">
    var seconds = <?php echo $user->getBlockExpiryRemaining(); ?>;

    function countdown(element) {
        var el = document.getElementById(element);

        if (seconds === 0) {
            document.getElementById("ban_container").innerHTML = "done";
            return;
        }
        else {
            el.innerHTML = seconds;
            seconds--;
            setTimeout(countdown(element), 1000);
        }
    }

    countdown('ban_countdown');
</script>

ただし、何らかの理由で、タイムアウト時間を待っているのではなく、countdownすぐに実行されるため、ページを更新するとすぐに「完了」と表示されます。実際に複数回実行されていることはわかっています。実行するinnerHTML += seconds + " ";と 45 からカウントダウンされるためです。タイムアウトがバイパスされるのはなぜですか?

4

3 に答える 3

68

setTimeout(countdown(element), 1000);はその引数で関数を実行し、結果を に渡しますsetTimeout。あなたはそれを望んでいません。

代わりに、関数を呼び出す無名関数を実行します。

setTimeout(function() {
    countdown(el);  // You used `el`, not `element`?
}, 1000);
于 2013-03-02T05:56:29.390 に答える
4

これは、setTimeout が非同期であるためです。これを試して：

setTimeout(function(){
   countdown('ban_countdown'); //or elemement
}, 1000);

これにより、関数 countdown が 1000 ミリ秒後に実行されます。

于 2013-03-02T05:55:51.637 に答える