Jquery Countdown Each Second

I'm trying to make a jQuery countdown type animation, that once it hits 0 it executes a function. However I'm having problems because I'm unsure how to go about doing this. I thoug

Solution 1:

• countdown takes an HTMLElement to display itself and the number of seconds to count down for

• It returns a Promise that resolves when the counter reaches 0

• We can use a .then call to apply a function when the count-down has completed

functioncountdown(elem, s) {
  returnnewPromise(function(resolve) {
    functionloop(s) {
      elem.innerHTML = s
      if (s === 0)
        resolve(elem)
      elsesetTimeout(loop, 1000, s - 1)
    }
    loop(s)
  })
}
                     
countdown(document.querySelector('#a'), 3).then(
  function(elem) { console.log('done', elem) }
)

countdown(document.querySelector('#b'), 5).then(
  function(elem) { console.log('done', elem) }
)

countdown(document.querySelector('#c'), 10).then(
  function(elem) { console.log('done', elem) }
)

<pid="a"></p><pid="b"></p><pid="c"></p>

You should also be aware that setTimeout and setInterval do not guarantee that the milliseconds argument used is 100% accurate …

var last = Date.now()
var interval = setInterval(function() {
  var now = Date.now()
  var delta = now - last
  console.log(delta)
  last = now
}, 1000)

setTimeout(clearInterval, 10000, interval)
// 1000// 1003// 998// 1002// 999// 1007// 1001// ... 

If you need a long running timer with high accuracy, I recommend you adapt the solution to use delta-based updates to the clock. If you rely upon setTimeout or setInterval for accuracy, you will be sad.

functioncountdown(elem, ms) {
  returnnewPromise(function(resolve) {
    functionloop(ms, last) {
      let now = Date.now()
      let delta = now - last
      if (ms <= 0) {
        elem.innerHTML = 0resolve(elem)
      }
      else {
        elem.innerHTML = (ms/1000).toFixed(3)
        setTimeout(loop, 25, ms - delta, now)
      }
    }
    loop(ms, Date.now())
  })
}
                     
countdown(document.querySelector('#a'), 3000).then(
  function(elem) { console.log('done', elem) }
)

countdown(document.querySelector('#b'), 5000).then(
  function(elem) { console.log('done', elem) }
)

countdown(document.querySelector('#c'), 10000).then(
  function(elem) { console.log('done', elem) }
)

<pid="a"></p><pid="b"></p><pid="c"></p>

Solution 2:

Code:

var counter = 10;
var yourFunc = function(){}
var interval = setInterval(function(){
    counter--;
    if(counter <=0){ yourFunc(); clearInterval(interval); }
}, 1000);

Solution 3:

I would use a recursive function

var countDown = function(secondsRemaining){
    secondsRemaining -= 1;
    if(secondsRemaining <= 0){
        //execute
    } else {
        //wait 1 second and call againsetTimeout(function(){
            countDown(secondsRemaining);
        }, 1000);
    }
}

then to initially start countdown (5 seconds)

countDown(5000);

Solution 4:

I would use something like the following :

 $(document).ready(function(){
  var counter=10;
  countDown();

  functioncountDown(){

    $('#showNumber').text(counter--);
    if(counter>=0) 
      window.setTimeout(countDown,1000)
    elseotherFunction();
  }

  functionotherFunction(){
     $('#showNumber').text('FINISHED!');
  }

});

Solution 5:

Try this out. It does not require jQuery.

var count = 5;  // Number of times to run 'counter_function'.// Run 'counter_function' every second (1000ms = 1 second)var counter = setInterval(function(){
    counter_function()
}, 1000);

// The function to run when 'count' hits 0.var done_function = function() {
    console.log('done');
}

// The function to run at each interval.var counter_function = function() {
    console.log('count');
    count--;

    if(count === 0){
        done_function();
        clearInterval(counter);
    }
}

It will print the word 'count' every second for 5 seconds, and at the last second it will also print 'done'.