javascript - barriga - la cerveza engorda mito o realidad

setTimeout() no está esperando

Question

Estoy tratando de hacer una cuenta regresiva de segundos con Javascript.

Aquí está mi 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>

Y mi 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>

Sin embargo, por alguna razón, no está esperando el tiempo de espera, sino que ejecuta la countdown inmediato para que cuando actualice la página solo muestre "listo" de inmediato. Sé que en realidad se está ejecutando varias veces porque si lo hago innerHTML += seconds + " "; cuenta regresivamente desde 45. ¿Por qué se está pasando por alto el tiempo de espera?

Answer 1

Es porque setTimeout es asincrónico. Prueba esto:

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

Esto hará que la cuenta atrás de la función se ejecute después de 1000 milisegundos.

Answer 2

Si desea pasar un argumento a una función por setTimeout , intente esto:

setTimeout(countdown, 1000, element);

La sintaxis de setTimeout es la siguiente:

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

Answer 3

setTimeout(countdown(element), 1000); ejecuta su función con ese argumento y pasa el resultado a setTimeout . No quieres eso.

En su lugar, ejecute una función anónima que llame a su función:

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