i want to build a small stopwatch in javascript. The Problem is that the variables that store the time (seconds, minutes, hours) are always undefined and dont increase. I dont finde the misstake! Whats the problem here? Any solutions?
Test.timer = {
seconds : 0,
minutes : 0,
hours : 0,
timeout : null,
running : 0,
tick: function() {
var self = this;
self.timeout = setTimeout(self.add, 1000);
},
add: function() {
var self = this;
self.seconds++;
if (self.seconds >= 60) {
self.seconds = 0;
self.minutes++;
if (self.minutes >= 60) {
self.minutes = 0;
self.hours++;
}
}
var time = document.getElementById("time");
time.textContent = (self.hours ? (self.hours > 9 ? self.hours : "0" + self.hours) : "00") + ":" + (self.minutes ? (self.minutes > 9 ? self.minutes : "0" + self.minutes) : "00") + ":" + (self.seconds > 9 ? self.seconds : "0" + self.seconds);
self.tick();
},
start: function() {
var self = this;
if (self.running == 0) {
self.running = 1;
self.tick();
}
},
stop: function() {
var self = this;
self.running = 0;
clearTimeout(self.timeout);
}
};
The result i get in the time label is: "00:00:0NaN"! Please help..
Because the scope will be window and not timer
self.timeout = setTimeout(self.add, 1000);
needs to be
self.timeout = setTimeout( function() { self.add(); }, 1000);
or
self.timeout = setTimeout(this.add.bind(this), 1000);
Your code in tick doesn't do anything to ensure that this within add is a reference to your object. In fact, your code is functionally identical to this:
tick: function() {
this.timeout = setTimeout(this.add, 1000);
},
In JavaScript, this is set primarily by how a function is called rather than where it's defined. The self trick you were using would work if add closed over self but it doesn't.
Because timer is a singleton, you could just use Test.timer everywhere you use this and resolve the problem that way.
add: function() {
var self = Test.timer;
// ...the rest is unchanged...
},
(And similar other places you've used this or var self = this;)
If you don't want to do that (or if you need to do this with non-singletons in the future), you can use ES5's Function#bind (which can be shimmed/polyfilled on older browsers):
tick: function() {
this.timeout = setTimeout(this.add.bind(this), 1000);
},
Function#bind returns a function that, when called, will call the original function with this set to the value you give it.
More to explore (on my blog):
Mythical methods
You must remember this
Related
I am attempting to write a Countdown timer script, and it works with only one instance on the page, but if I add a second one, only the second starts counting.
I discovered that if I load both, but only call the start for the second one, the first one fires. It appears that they are not scoped correctly.
I'm using the new class syntax, so I thought it should work as is, but I'm obviously missing something. I'm hoping someone can help me understand what I'm doing wrong. My primary language is PHP, and I am not as well versed in JS as I'd like to be.
Here is a link to my gist which contains the code: https://gist.github.com/kennyray/b35f4c6640be9539c5d16581de7714e0
class CountdownTimer {
constructor(minutesLabel = null, secondsLabel = null) {
self = this;
this.minutesLabel = minutesLabel;
this.secondsLabel = secondsLabel;
this.totalSeconds = (this.minutesLabel.textContent / 60) + this.secondsLabel.textContent;
this.timer = null;
}
set minutesLabel(value) {
self._minutesLabel = value;
}
set secondsLabel(value) {
self._secondsLabel = value;
}
get minutesLabel() {
return self._minutesLabel;
}
get secondsLabel() {
return self._secondsLabel;
}
setTime() {
self.totalSeconds--;
if (parseInt(self.minutesLabel.innerHTML) == 0 && parseInt(self.secondsLabel.innerHTML) == 0) { self.stopTimer; return;}
if (self.secondsLabel.innerHTML.textContent < 0) { self.secondsLabel.innerHTML = 59 }
if (self.minutesLabel.innerHTML.textContent < 0) { self.minutesLabel.innerHTML = 59 }
self.secondsLabel.innerHTML = self.pad((self.totalSeconds % 60));
self.minutesLabel.innerHTML = self.pad(Math.floor(self.totalSeconds / 60));
}
pad(val) {
var valString = val + "";
if (valString.length < 2) {
return "0" + valString;
} else {
return valString;
}
}
resetTimer() {
clearInterval(self.timer);
self.totalSeconds = 0;
self.secondsLabel.innerHTML = self.pad(self.totalSeconds % 60);
self.minutesLabel.innerHTML = self.pad(parseInt(self.totalSeconds / 60));
}
startTimer() {
self.timer = setInterval(self.setTime, 1000);
}
stopTimer() {
clearInterval(self.timer);
}
}
const t1 = new CountdownTimer(document.getElementById("minutes1"), document.getElementById("seconds1"));
t1.startTimer();
const t2 = new CountdownTimer(document.getElementById("minutes"), document.getElementById("seconds"));
console.log(t1.startTimer() === t2.startTimer());
t2.startTimer();
<label id="minutes1">01</label>:<label id="seconds1">10</label>
<br>
<label id="minutes">00</label>:<label id="seconds">10</label>
You're declaring a global variable self (why the hell do you do this?) that get's overiden. Just use this in a class.
Your startTimer function then needs to be
startTimer() {
this.timer = setInterval(this.setTime.bind(this), 1000);
}
and should maybe check if there's already an interval and clear this.timer completely
startTimer() {
if (this.timer) this.stopTimer();
this.timer = setInterval(this.setTime.bind(this), 1000);
}
stopTimer() {
clearInterval(this.timer);
this.timer = null;
}
It really boils down to this line
self = this;
By not including the keyword var you elevate that to global scope. If you want to use self instead of this in the ctor (which is perfectly fine) just prefix it with var:
var self = this;
I am trying to create a generic countdown timer object in Javascript
I have a method (decrementTimer) that reduces the timeLeft on counter by a fixed amount and another method which uses setInterval to call decrementTimer method.
The problem is that the code only runs once not every second. It looks like setInterval isn't putting the decrementTimer function on the queue inside my object.
I have tried making javascript do an Eval by putting the keyword "window" in front of the setIntervalfunction call but this doesn't work.
I can't use a Javascript class because I can't assume that all browsers support ECMAScript 6. I am using IE11.
I have also found solutions that work when you are doing this in a function but no examples of how to make this work in an object.
I would appreciate some help.
<script>
var myTimer = {
timeLeft: 10,
timerJobNumber: null,
decrementTimer: function(){
alert("decrementTimer called. timeLeft = " + this.timeLeft);
this.timeLeft = this.timeLeft - 1;
if(this.timeLeft<0){
alert("done");
}
},
startTimer: function(){
alert("startTimer called");
this.timerJobNumber = window.setInterval(this.decrementTimer(),10);
alert("Interval Job Number = " + this.timerJobNumber);
},
stopTimer: function(){
clearInterval(this.timerJobNumber);
alert(this.timerJobNumber);
alert("job terminated");
},
resetTimer: function(initialTime){
this.TimeLeft = initialTime;
alert("intitialTime="+intitialTime);
},
getTimeLeft: function(){
return this.timeLeft;
}
};
console.log(myTimer.getTimeLeft());
console.log(myTimer.startTimer() );
console.log(myTimer.getTimeLeft());
</script>
I didn't really check all of your code, but this seems to do what you want :
var myTimer = {
timeLeft: 10,
timerJobNumber: null,
decrementTimer: function(){
console.log("decrementTimer called. timeLeft = " + this.timeLeft);
this.timeLeft = this.timeLeft - 1;
if(this.timeLeft<0){
this.stopTimer();
}
},
startTimer: function(){
this.timerJobNumber = window.setInterval(this.decrementTimer.bind(this),1000);
console.log("Interval Job Number = " + this.timerJobNumber);
},
stopTimer: function(){
clearInterval(this.timerJobNumber);
alert(this.timerJobNumber);
},
resetTimer: function(initialTime){
this.TimeLeft = initialTime;
alert("intitialTime="+intitialTime);
},
getTimeLeft: function(){
return this.timeLeft;
}
};
Note that you can easily transform this into a class like function :
var MyTimer = function() {
this.timeLeft = 10;
this.timerJobNumber = null;
};
MyTimer.prototype.decrementTimer = function() {
console.log("decrementTimer called. timeLeft = " + this.timeLeft);
this.timeLeft = this.timeLeft - 1;
if(!this.timeLeft > 0)
this.stopTimer();
};
MyTimer.prototype.startTimer = function() {
this.timerJobNumber = window.setInterval(this.decrementTimer.bind(this),1000);
console.log("Interval Job Number = " + this.timerJobNumber);
};
MyTimer.prototype.stopTimer = function() {
clearInterval(this.timerJobNumber);
alert(this.timerJobNumber);
};
MyTimer.prototype.resetTimer = function(initialTime) {
this.timeLeft = initialTime;
alert("intitialTime="+intitialTime);
};
MyTimer.prototype.getTimeLeft = function() {
return this.timeLeft;
};
//...
var m = new MyTimer();
m.startTimer();
I think you don't bind your decrementTimer() inside the setInterval() function.
startTimer: function(){
alert("startTimer called");
this.timerJobNumber = window.setInterval(this.decrementTimer.bind(this),10);
alert("Interval Job Number = " + this.timerJobNumber);
}
if you are not familiar this topic, then follow this link. I think it will help you.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind
I'm working on a little "web app" for a quiz.
Each slide has got a certain amount of time to be answered (or 0 to infinite time).
I find JS here to do the countdown:
function Countdown(options) {
var timer,
instance = this,
seconds = options.seconds || 10,
updateStatus = options.onUpdateStatus || function () {},
counterEnd = options.onCounterEnd || function () {};
function decrementCounter() {
updateStatus(seconds);
if (seconds === 0) {
counterEnd();
instance.stop();
}
seconds--;
}
this.start = function () {
clearInterval(timer);
timer = 0;
seconds = options.seconds;
timer = setInterval(decrementCounter, 1000);
};
this.stop = function () {
clearInterval(timer);
};
}
var myCounter = new Countdown({
seconds: timetogo, // number of seconds to count down
onUpdateStatus: function (sec) {
elapsed = timetogo - sec;
$('.progress-bar').width(((elapsed / timetogo) * 100) + "%");
}, // callback for each second
onCounterEnd: function () {
//alert('counter ended!');
} // final action
});
myCounter.start();
I made a jsfiddle here :
https://jsfiddle.net/mitchum/kz2400cc/2/
But i am having trouble when you go to the next slide, the progress bar "bump".
after looking into "live source panel from chrome" I saw it's like the first "counter" is not stopped and still runs.
Do you have any tips or hint to help me to solve my bug ?
Thanks
You must pay attention to the scope of the variables. I change the "var myCounter" under document ready in "var myCounterFirst". Check the updated JSFiddle.
var timetogoFirst = $('.current').attr("data-time");
var myCounterFirst = new Countdown({
seconds: timetogoFirst, // number of seconds to count down
onUpdateStatus: function (sec) {
elapsed = timetogoFirst - sec;
$('.progress-bar').width(((elapsed / timetogoFirst) * 100) + "%");
}, // callback for each second
onCounterEnd: function () {
alert('counter ended!');
} // final action
});
myCounterFirst.start();
Need some help with my code, I can't get my alerts to work with my countdown timer. They should be alerting at 4,3,2 minutes left on the timer. I currently can't get the alerts to fire at all, sometimes they would fire but each second after 4, the alert for "4" would fire. I need it to just go once... Any help would be appreciated
Heres my script
var running=false
var endTime=null
var timerID=null
function startTimer(){
running=true
now=new Date()
now=now.getTime()
endTime=now+(1000*60*5)
showCountDown()
}
function showCountDown(){
var now=new Date()
now=now.getTime()
if (endTime-now<=239990 && endTime-now>240010){alert("4")};
if (endTime-now<=179990 && endTime-now>180010){alert("3")};
if (endTime-now<=119990 && endTime-now>120010){alert("2")};
if (endTime-now<=0){
stopTimer()
alert("Time is up. Put down pencils")
} else {
var delta=new Date(endTime-now)
var theMin=delta.getMinutes()
var theSec=delta.getSeconds()
var theTime=theMin
theTime+=((theSec<10)?":0" : ":")+theSec
document.forms[0].timerDisplay.value=theTime
if (running){
timeID=setTimeout("showCountDown()",1000)
}
}
}
function stopTimer(){
clearTimeout(timeID)
running=false
document.forms[0].timerDisplay.value="0.00"
}
Update, Sorry meant minutes instead of seconds
Update 2: Change the ifs, now they fire but keep firing after the 4 second mark
if (endTime-now<=240010 && endTime-now<=239990){alert("4")};
if (endTime-now<=180010 && endTime-now<=179990){alert("3")};
if (endTime-now<=120010 && endTime-now<=119990){alert("2")};
Why are you calling clearTimeout? setTimeout invokes its callback only once. There is no need to clear it. Also you could just have a variable that stores the minutes until the end of the countdown and decrement that by one in each iteration.
The simplest solution might look like this
function startTimer(minutesToEnd) {
if(minutesToEnd > 0) {
if(minutesToEnd <= 4) {
console.log(minutesToEnd);
}
setTimeout(startTimer, 60000, minutesToEnd - 1);
} else {
console.log("Time is up. Put down pencils")
}
}
I actually spent some time working on this. I have no idea if this is what you wanted, but I created a timer library. I have a working demo for you. I had fun making this. Let me know what you think:
JS:
(function () {
var t = function (o) {
if (!(this instanceof t)) {
return new t(o);
}
this.target = o.target || null;
this.message = o.message;
this.endMessage = o.endMessage;
//setInterval id
this.si = -1;
//Initial start and end
this.startTime = null;
this.endTime = null;
this.interTime = null;
this.duration = o.duration || 1000 * 60 * 5;
//looping speed miliseconds it is best to put the loop at a faster speed so it doesn't miss out on something
this.loop = o.loop || 300;
//showing results miliseconds
this.show = o.show || 1000;
};
t.fn = t.prototype = {
init: function () {}
};
//exporting
window.t = t;
})();
//Timer Functions ---
t.fn.start = function () {
this.startTime = new Date();
this.interTime = this.startTime.getTime();
this.endTime = new Date().setMilliseconds(this.startTime.getMilliseconds() + this.duration);
//returns undefined... for some reason.
console.log(this.endTime);
var $this = this;
this.writeMessage(this.duration);
this.si = setInterval(function () {
var current = new Date(),
milli = current.getTime();
if (milli - $this.interTime >= $this.show) {
var left = $this.endTime- milli;
if (left <= 0) {
$this.stop();
} else {
$this.interTime = milli;
$this.writeMessage(left);
}
}
}, this.loop);
return this;
};
t.fn.writeMessage = function(left){
this.target.innerHTML = this.message + ' ' + Math.floor(left / 1000);
return this;
};
t.fn.stop = function () {
//stopping the timer
clearInterval(this.si);
this.target.innerHTML = this.endMessage;
return this;
};
//Not chainable
t.fn.isRunning = function () {
return this.timer > -1;
};
var timer = t({
target: document.getElementById('results'),
loop: 50,
duration: 10000,
show: 1000, //default is at 1000 miliseconds
message: 'Time left: ', //If this is ommited then only the time left will be shown
endMessage: 'Time is up. Put down your pencils'
}).start();
document.getElementById('stop').onclick = function(){
timer.stop();
};
HTML:
<div id="results"></div>
<button id="stop">Stop</button>
Demo here
Update: I added some stuff
Demo 2
Update 2: I fixed the bug where 10 would hop straight to 8
Demo 3
Can anyone tell me what am i doing wrong? i have the timer which is displaying with 2 or 3 or 4 seconds at once increment instead of per second.
var call_s = 0;
var call_m = 0;
var call_h = 0;
var call_connected = null;
var display = null ;
function connected_timer_start(tototo) {
call_connected = setTimeout(function() {
call_s++;
if (call_s>59) {
call_s = 0;
call_m++;
}
if (call_m>59){
call_m = 0;
call_h++;
}
display = (call_h < 10 ? '0' : '') + call_h + ':' +
(call_m < 10 ? '0' : '') + call_m + ':' +
(call_s < 10 ? '0' : '') + call_s;
console.log(display);
connected_timer_start();
}, 1000);
}
function connected_timer_stop() {
call_s = 0;
call_m = 0;
call_h = 0;
clearTimeout(call_connected);
call_connected = null;
document.getElementById('display').style.display = 'none';
}
As jfriend00 said, you shouldn't use setTimeout() to figure out the time values, because it's not reliable. A version of code that uses Date() is actually shorter and simpler:
var begining_timestamp = null;
var call_connected = null;
var call_ms = null;
var display = null ;
function connected_timer_start() {
if (call_connected==null) {
begining_timestamp = (new Date()).getTime();
count();
} else {
console.log('One timer is already started!');
}
}
function count() {
call_connected = setTimeout(function() {
getCallLength();
count();
}, 1000);
}
function getCallLength() {
call_ms = (new Date()).getTime() - begining_timestamp;
var tmp_date = new Date(null);
tmp_date.setSeconds(call_ms/1000);
display = tmp_date.toISOString().substr(11, 8);
console.log(display);
}
function connected_timer_stop() {
clearTimeout(call_connected);
getCallLength();
call_connected = null;
document.getElementById('display').style.display = 'none';
}
I see several advantages to this approach:
times are accurate even if setTimeout triggers every 2 seconds or at random times, your call duration will be accurate
the call duration gets updated when the call ends, to make sure it's completely accurate
you have the call time down to milliseconds, if you ever need that
the call_ms variable does not get cleared when a call ends, but when a call starts; that means between two calls, you can always have the last call length expressed in milliseconds
as AlexAtNet suggested, you may start the timer more than once, by mistake; so connected_timer_start now checks if the timer is not already started