setTimeout() is not waiting [duplicate]

Question

I am trying to make a seconds countdown with Javascript.

Here is my 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> 

And my 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> 

However for some reason, it is not waiting the timeout time, but instead executes countdown right away so that when I refresh the page it just displays "done" right away. I know it is actually being executed multiple times because if I do innerHTML += seconds + " "; it counts down from 45. Why is the timeout being bypassed?

Answer 1

setTimeout(countdown(element), 1000); executes your function with that argument and passes the result into setTimeout. You don't want that.

Instead, execute an anonymous function that calls your function:

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