SetTimeout() не ждет

Я пытаюсь сделать обратный отсчет секунд с помощью 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. Почему тайм-аут обходит?

Ответ 1

setTimeout(countdown(element), 1000); выполняет вашу функцию с этим аргументом и передает результат в setTimeout. Вы этого не хотите.

Вместо этого выполните анонимную функцию, которая вызывает вашу функцию:

setTimeout(function() {
    countdown(el);  // You used `el`, not `element`?
}, 1000);

Ответ 2

Это потому, что setTimeout является асинхронным. Попробуйте следующее:

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

Это приведет к обратному отсчету функции после 1000 миллисекунд.

Ответ 3

Если вы хотите передать аргумент функции setTimeout, попробуйте следующее:

setTimeout(countdown, 1000, element);

Синтаксис setTimeout следующий:

setTimeout(function,milliseconds,param1,param2,...)