Millisecond JQuery Countdown Timer

Question

I have a very simple easy function that counts down from 30 seconds. I am trying to add milliseconds to it, but I cannot get it to work correctly.

var count = 30; var counter = setInterval(timer, 1000); //1000 will run it every 1 second function timer() { if (count <= 0) { clearInterval(counter); return; } count = count - 1; document.getElementById("timer").innerHTML = count + " secs"; // watch for spelling } 

Answer 1

Try this way . In any case, stopwatch takes into account hundredths of a second.

 var count = 3000; var counter = setInterval(timer, 10); //10 will run it every 100th of a second function timer() { if (count <= 0) { clearInterval(counter); return; } count--; document.getElementById("timer").innerHTML=count /100+ " secs"; } 

Just for better formatting and testing :

HTML

 <span id="timer"></span> <button id="start">start</button> <button id="stop">stop</button> <button id="reset">reset</button> 

Javascript

 var initial = 30000; var count = initial; var counter; //10 will run it every 100th of a second function timer() { if (count <= 0) { clearInterval(counter); return; } count--; displayCount(count); } function displayCount(count) { var res = count / 100; document.getElementById("timer").innerHTML = res.toPrecision(count.toString().length) + " secs"; } $('#start').on('click', function () { clearInterval(counter); counter = setInterval(timer, 10); }); $('#stop').on('click', function () { clearInterval(counter); }); $('#reset').on('click', function () { clearInterval(counter); count = initial; displayCount(count); }); displayCount(initial); 

EDIT:

The initial question was trying to figure out how to make a display like a stopwatch, and I know very little that actually counts milliseconds. However, here is a possible solution for this. He relies on the update as quickly as possible and gets the difference between our last update and our current one to stay accurate.

 var initial = 300000; var count = initial; var counter; //10 will run it every 100th of a second var initialMillis; function timer() { if (count <= 0) { clearInterval(counter); return; } var current = Date.now(); count = count - (current - initialMillis); initialMillis = current; displayCount(count); } function displayCount(count) { var res = count / 1000; document.getElementById("timer").innerHTML = res.toPrecision(count.toString().length) + " secs"; } $('#start').on('click', function () { clearInterval(counter); initialMillis = Date.now(); counter = setInterval(timer, 1); }); $('#stop').on('click', function () { clearInterval(counter); }); $('#reset').on('click', function () { clearInterval(counter); count = initial; displayCount(count); }); displayCount(initial); 

Answer 2

The problem is that the browser cannot handle DOM manipulation every milliseconds. For this reason, many browsers actually set the minimum value for intervals - and the W3C offers a minimum of 4 ms (source) . We can use this information to create a throttled approach that runs as quickly as possible.

 // We actually only run our method every x millisecs, due to browser constraints var THROTTLE_AMOUNT = 4; countdown(30); function countdown(secs) { var milli = secs * (1000); var counter = setInterval(function() { if(milli <= 0) { clearInterval(counter); return } milli -= THROTTLE_AMOUNT; document.getElementById("timer").innerHTML = milli + " millisecs"; // watch for spelling }, THROTTLE_AMOUNT); } 

Answer 3

You can try this. If you focus on modern browsers, you may have access to the Performance API, which provides high-resolution timestamps instead of regular timestamps.

An improved solution will use requestAnimationFrame() . Updating the DOM every milliseconds, even if it is possible with setTimeout (), is a waste of resources, since the browser refreshes the screen, usually 60 times per second (every 16.6 ms). Updating the clock two or more times in this interval would be useless, and the user will only see the last value.

 function now() { return window.performance ? window.performance.now() : Date.now(); } var count = 30000; var delay = 20; //20 ms. This will be only indicative. There no guarantee the browswer will call the function after exactly this time var initTick = 0; var timerElement = document.getElementById("timer"); function tick() { var remaining = (count - (now() - initTick)) / 1000; console.log(remaining); remaining = remaining >= 0 ? remaining : 0; var secs = remaining.toFixed(2); timerElement.innerHTML = secs + " secs"; if (remaining) setTimeout(tick, delay); } initTick = now(); console.log(now()); setTimeout(tick, delay); 

JSFIDDLE.

Answer 4

  This may help you: var count = 30; var count1 = 60; //1000 will run it every 1 second var counter1; var counter = setInterval(timer, 1000); function timer1() { if (count1 <= 0 && count < 1) { clearInterval(counter1); return; } else { if (count1 <= 0 && count > 0) count1 = 60; else count1 = count1 - 1; //var counter=setInterval(timer, 1000); } document.getElementById("timer").innerHTML = count + "." + count1 + " secs"; // watch for spelling } function timer() { if (count <= 0) { clearInterval(counter); return; } else { counter1 = setInterval(timer1, 10); } count = count - 1; } 

Answer 5

Based on previous answers, I got vanilla javascript, an object oriented approach.

I also created a github repository if someone wants to improve it.

https://github.com/denodster/JSTimer

 function Timer(element){ var interval; var milliseconds = 0; var self = this; function printValue(){ var seconds = Math.round(milliseconds/10)/100; $(element).empty(); $(element).text(seconds); } this.start = function(seconds, countdown){ if(interval){//if an interval exists clear it first clearInterval(interval); } if(seconds) {//if seconds are passed in reset the milliseconds milliseconds = milliseconds + (seconds * 1000); } interval = setInterval(function(){ if(countdown) { if (milliseconds >= 0) { milliseconds -= 10; printValue(); } else { self.stop(); } } else { milliseconds += 10; printValue(); } }, 10); }; this.stop = function(){ clearInterval(interval); }; this.reset = function(){ milliseconds = 0; printValue(); }; this.getValue = function(){ return milliseconds/1000; }; } 

Example:

 <span id="counter"></span> <script type="text/javascript"> //count down to zero from 10 seconds var counter = document.getElementById('counter'); var timer = new Timer(counter); timer.start(10, true); </script> 

Answer 6

I know this post is old, but I thought I should share my answer, maybe this will help someone. This script counts the current date / time with milliseconds, minutes, seconds, month, day, year and suffix, it is easy to change, you can change it to a countdown if you need

  function showRemaining() { var currentDate = new Date(); //'11/23/2016 12:00 AM' var month = currentDate.getMonth() + 1 var day = currentDate.getDate() var year = currentDate.getFullYear() var currentTime = new Date() var hours = currentTime.getHours() var minutes = currentTime.getMinutes(); var seconds = currentTime.getSeconds(); //var milliseconds = currentTime.getMilliseconds().toString().slice(0, 3); //+ 999; //* 111 var milliseconds = (currentTime.getMilliseconds()/.11).toFixed(0) //var milliseconds = currentTime * 3 var timer; if (minutes < 10) minutes = "0" + minutes var suffix = "AM"; if (hours >= 12) { suffix = "PM"; hours = hours - 12; } if (hours === 0) { hours = 12; } if (seconds < 10) seconds = "0" + seconds if (seconds >= 60) { seconds = seconds - 60; } if (seconds === 60) { seconds = 60; } if (hours < 10) hours = "0" + hours if (hours >= 12) { hours = hours - 12; } if (hours === 12) { hours = 12; } if (milliseconds < 1000) milliseconds = "0000";// + milliseconds if (milliseconds >= 1000) { milliseconds = milliseconds - 100; //was 1000 } if (milliseconds === 1000) { milliseconds = 1000; } var now = new Date(); var distance = currentDate - now; if (distance < 0) { return; } /*var days = Math.floor(distance / day); var hours = Math.floor((distance % day) / hour); var minutes = Math.floor((distance % hours) / minute); var seconds = Math.floor((distance % minutes) / second); //var milliseconds = Math.floor(distance % _second) / _millisecond;*/ document.getElementById('countdown').innerHTML = month + '/'; // months document.getElementById('countdown').innerHTML += day + '/'; // days document.getElementById('countdown').innerHTML += year + '<br>'; // year document.getElementById('countdown').innerHTML += hours + ' : '; // hrs document.getElementById('countdown').innerHTML += minutes + ' : '; // mins document.getElementById('countdown').innerHTML += seconds + ' : '; // secs document.getElementById('countdown').innerHTML += milliseconds + ' '; // milliseconds document.getElementById('countdown').innerHTML += '<b>' + suffix + '</b>'; // suffix } timer = setInterval(showRemaining, 1); 

 <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <p id="countdown"></p> </body> </html>