javascript - Timer Stops Only After Second Click? -
not sure why happening. when start timer , click stop, not stop. when click stop twice, stops. tried re-arranging logic flow , can not find conclusion. function stoptimer(); 1 stops function. input appreciated!
js bin:
http://jsbin.com/baxuxamoso/2/edit
html
<h1><div id="time">00:00:00</div></h1> <div id="result"></div> <button id="start" onclick="startclock();">start</button> <button id="stop" onclick="stoptimer();">stop</button> <button id="clear" onclick="resettimer();">reset</button> js
var currenttime = document.getelementbyid('time'); var hundreths = 0; var seconds = 0; var minutes = 0; var t; function timer() { t = settimeout(add, 10); } function add() { hundreths++; if (hundreths > 99) { hundreths = 0; seconds++; if (seconds > 59) { seconds = 0; minutes++; } if (minutes >= 10) { seconds = 0; minutes = 0; stoptimer(); } } // end if statement if (hundreths > 9 && seconds < 9) { currenttime.innerhtml = "0" + minutes + ":" + "0" + seconds + ":" + hundreths; } else if ((seconds > 9) && (hundreths < 9)) { currenttime.innerhtml = "0" + minutes + ":" + seconds + ":" + "0" + hundreths; } else if ((seconds > 9) && (hundreths > 9)) { currenttime.innerhtml = "0" + minutes + ":" + seconds + ":" + hundreths; } else if ((minutes > 9) && (seconds < 9) && (hundreths < 9)) { currenttime.innerhtml = minutes + ":" + "0" + seconds + ":" + "0" + hundreths; } else if ((minutes > 9) && (seconds > 9) && (hundreths < 9)) { currenttime.innerhtml = minutes + ":" + seconds + ":" + "0" + hundreths; } else if ((minutes > 9) && (seconds > 9) && (hundreths < 9)) { currenttime.innerhtml = minutes + ":" + seconds + ":" + hundreths; } else { currenttime.innerhtml = "0" + minutes + ":" + "0" + seconds + ":" + "0" + hundreths; } timer(); } // end function add function startclock() { add(); timer(); } // end function start clock function stoptimer() { document.getelementbyid("result").innerhtml = "<p>" + ("your time is: " + minutes + " minutes, " + seconds + " seconds, " + "and " + hundreths + " hundreths") + "</p>"; cleartimeout(t); } function resettimer() { hundreths = 0; seconds = 0; minutes = 0; currenttime.innerhtml = "00:00:00"; }
startclock calls add , timer, add calls timer itself. (note how clock moving @ twice speed should.) remove call timer in startclock.
also note settimeout isn’t accurate making clocks, , small errors accumulate when calling repeatedly. can try improve things using performance.now() (a monotonic clock) when available, or new date().gettime() (susceptible system date changes) when not, (updated js bin):
var timeelement = document.getelementbyid("time"); var gettime = typeof performance !== "undefined" ? function () { return performance.now(); } : function () { return new date().gettime(); }; var starttime = null; var timer = null; function repeat(value, count) { return new array(count + 1).join(value); } function pad(number, width) { return (repeat("0", width - 1) + number).slice(-width); } function totime(milliseconds) { return { minutes: milliseconds / 60000 | 0, seconds: (milliseconds / 1000 | 0) % 60, centiseconds: (milliseconds / 10 | 0) % 100, }; } function formattime(milliseconds) { var time = totime(milliseconds); return pad(time.minutes, 2) + ":" + pad(time.seconds, 2) + ":" + pad(time.centiseconds, 2); } function updatetime() { timeelement.textcontent = starttime === null ? "00:00:00" : formattime(gettime() - starttime); } function starttimer() { if (starttime === null) { starttime = gettime(); } timer = setinterval(updatetime, 10); } function stoptimer() { clearinterval(timer); timer = null; var time = totime(milliseconds); resultelement.textcontent = "your time " + time.minutes + "minutes, " + time.seconds + "seconds, , " + time.centiseconds + " hundredths"; } function resettimer() { starttime = timer === null ? null : gettime(); updatetime(); }