CODEWITHSUNDEEP
javascriptcountdown
jroes
jroes

Reputation: 33

I need countdown timer to countdown slowly

I want to build a countdown timer from 10 to 0. However, the code I have now goes too fast.

Goal: I want to show the countdown visually. For example, 10,9,8,7,6,etc.

Currently, the timer goes from 10 to 1. I'm new to Javascript so I'd appreciate it if simple solutions were given. I've tried setTimeInterval() and I have not gotten anywhere. I've checked similar solutions but the answers were beyond my comprehension.

In debugger mode, the countdown does count down from 10 to 1 slowly. Outside of it the function goes way too fast.

 <!DOCTYPE html>
  <html>

 <head>
 <meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 </head>
 <body>

<div id ="main-container">
    <div class="countdown"><p class="time">10</p></div>

    <button id="btn" onclick=timer()>Begin Countdown</button>

    <div class="countdown"><p class="time">10</p></div>
</div>



   </body>


   </html>



 function timer(){

i = 10
var num = [0,1,2,3,4,5,6,7,8,9,10,11];
var time = document.getElementsByClassName("time");

    while(i != 0 ){
        

        //time -= i;
        time[0].innerHTML = num[i];

        i--;

    }



 }

Upvotes: 0

Views: 272

Answers (2)

SpoonMeiser
SpoonMeiser

Reputation: 20427

Your code loops through numbers and updates the page without any pause. Potentially this would just mean that the numbers flash by really fast, but actually it's worse than that. Browsers typically run javascript until it finishes, and only then re-render the page, before the next event triggers more javascript to run. That means that you'll only see the final state of the page.

In your case, you need to make sure that you let the browser at least re-render each time you change the number. setInterval would be one way to do that - each call to the callback updates the page and then finishes.

In this case, I think using setTimeout is a simpler solution. You can write a function that takes a number as an argument. You can then update the page to show that number, and use setTimeout to call the same function after a delay with one less than the number passed in:

function tick(num) {
  // set the number on the page to num
  var time = document.getElementsByClassName("time");
  time[0].innerHTML = num;

  // if we've reached 0, we're done
  if (num == 0) return;
  
  // otherwise, in 1000ms call this function again with num being one less
  window.setTimeout(() => tick(num-1), 1000);
}
<div id ="main-container">
    <div class="countdown"><p class="time">10</p></div>

    <button id="btn" onclick="tick(10)">Begin Countdown</button>

    <div class="countdown"><p class="time">10</p></div>
</div>

Upvotes: 1

ray
ray

Reputation: 171

May be it could be :p

var num = [0,1,2,3,4,5,6,7,8,9,10,11];
function timer(i){
  var i = i || num.length - 1; 
  setTimeout(function(){
    var time = document.getElementsByClassName("time");      
    time[(num.length - i)].innerHTML = num[i];
    i--;
    timer(i);
  }, 500);
 }
 
 timer(0)
<div class="countdown">
    <p class="time"><p>
    <p class="time"><p>
    <p class="time"><p>
    <p class="time"><p>
    <p class="time"><p>
    <p class="time"><p>
    <p class="time"><p>    
    <p class="time"><p>    
    <p class="time"><p>    
    <p class="time"><p>        
    <p class="time"><p>        
    <p class="time"><p>            
</div>

Upvotes: 0

Related Questions