Home > database >  Pure Javascript countdown timer (Vanilla.js)
Pure Javascript countdown timer (Vanilla.js)

Time:09-16

I have the following two functions:

// COUNTDOWN TIMER FUNCTION
function refillTimer(theTime) {
  var timer = new Date().getTime()   theTime;
  $('#refillTimer').countdown(timer).on('update.countdown', function(event) {
    $(this).show();
    var $this = $(this);
    if(event.elapsed){
      $this.html(event.strftime('0:0:0'));
    }else{
      $this.html(event.strftime('<strong>%S</strong>'));
    }
  }).on('finish.countdown', function(){
    $(this).hide();
  });
}

// ON SWIPE PERFORM ACTION
async function swipeAction(currentElementObj, swipeType) {
  var cardId = currentElementObj.getAttribute("value");
  var dataString = {
    card: cardId,
    swipe: swipeType
  };
  let response = await new Promise((resolve, reject) => {
    try {
      var xhr = new XMLHttpRequest();
      xhr.open("POST", "processes/swipe.php", true);
      xhr.setRequestHeader("Content-Type", "application/json");
      xhr.responseType = "json";
      xhr.send(JSON.stringify(dataString));
      xhr.onreadystatechange = function () {
        let resObj = xhr.response;
        if(xhr.readyState == 4 && xhr.status == 200 && resObj) {
          $('#content').modal('show');
          refillTimer(resObj.nextswipe); // resObj.nextswipe returns 37000 seconds
        }
      };
    }catch(e){
      reject(e.toString());
    }
  });
}

Here in the above code as you can see I have a countdown timer that I am trying to use in swipeAction() function. The problem here is that the timer is not working as per the input provided. Say for example, the input passed in the refilTImer(theTime) function as theTime is 37000. Therefore, the the function should take 37000 seconds, convert it to HH:MM:SS and start the display of countdown accordingly. Simple as that. However, at every call the countdown timer starts at 37 seconds. The seconds passed it 43650, the timer countdowns from 43 seconds only. I don't understand why this is happening. What can be the solution here?

CodePudding user response:

You're passing milliseconds, not seconds.


Looking at the definition of the function you're using:

getTime() MDN

number of milliseconds...

and a guess at your plugin as The Final Countdown

finalDate

The target date that you are seeking to countdown. This argument can be one of the following:

  • A native date object
  • The milliseconds from Epoch time
  • Formatted string

shows that passing 37000 is 37000 milliseconds, so 37 seconds.

  • Related