Multiple Timers

[andysowards]

Nice plugin! I'm trying to wrap my head around it - I'm using it in a project but whenever I add multiple timers to a page, they WORK, however, only one works at a time - and its like the plugin can't keep track of more than one timer at a time

any way to make it work with multiple instances? It looks like its setup to in the plugin code its just not working and can't figure out why!

Thanks for your time and help! 👍

[andysowards]

I've made some tweaks, if I put all of the functions inside of this block

// INITIALIZE THE PLUGIN
var pluginName = 'timer';
$.fn[pluginName] = function(options) {
options = options || 'start';

    return this.each(function() {

then it begins to work just fine on multiple instances, keeps track of the time, however, when I go to pause, it bugs out - it almost looks like it starts 2 timers on one - so its blinking between the old time and the new time in the same element, which i'm not sure what I should change now to fix that

Thanks!

[walmik]

Thanks for your kind comments :)

The reason I did not add support for multiple timers is because of the fact that timers are a browser feature (not a JavaScript feature). In fact John Resig's article on the subject is what prompted me to think in this direction. If you re doing anything non trivial with timers, I d say, you take a look at it:

http://ejohn.org/blog/how-javascript-timers-work/

Having said that, I am open to ideas/suggestions/PRs that deal with this problem given the fact that we can now use Workers

[andysowards]

Awesome, I will check this out thanks for the link

I just need multiple timers to work as they do so that people can use them to time things and submit the time data via a form, which this will work perfect for if I can get it working correctly, i'll let you know if I figure anything out - do you know of any timers that allow multiple instances on a page?

Thanks for your time!

[shantanuthatte]

How about if we use WebWorkers, if not then fallback to updating every timer element's data-seconds?

PS @walmik: This is too interesting plugin, I'm forking and will add ideas, you can accept PR later if you want..

[walmik]

I ve been toying around with the idea of web workers for this but never got around to doing it due to time constraints. PRs (and ideas) are most welcome :)

[spedroq]

Hey guys, great plugin! I would like to let you know that I'm having issues with multiple timer instances, even though I give them unique ID's they still affect each other. (on a separate note: your seconds are not exactly accurate)

In any case let me know if there is a way to have multiple timers, or if it is a feature you guys havent implemented or are yet to fix.

Thanks for your time,
Pedro Q

[walmik]

At the moment, it s a single timer implementation and we definitely want to support multiple timers. This task is open for current contributors or new. If no one picks it up, being the lead maintainer, I ll start this soon.

About the inaccurate seconds, please create a separate issue with steps to reproduce it or any info that can help in identifying the issue.

Above all, Thanks for your comments and interest :)

[mfsi-subhranil]

Any update on multiple timers on same page? I need multiple timers in a page.

[walmik]

Thanks for your concern and desire to use this plugin in your page. Unfortunately I do not have the bandwidth to implement it. Though I m open to PRs that will add this implementation.

[ghost]

Multiple timers would be amazing. I was using this plugin and got pretty far into development when I was asked to run timers concurrently, but unfortunately after reading this I find out it's not possible, which is too bad because the ease of use with this plugin is nice. Any recommendations for jquery timers that can run multiple or any advice on how to tweak the code to allow this happen or anything helpful? Not being able to do multiple timers is a huge shortcoming.

[walmik]

I agree. It d be great to have multiple timers.

One way to implement (from a bird's eye view), currently the plugin treats all timer related variables singularly. It takes the current timestamp and every 500ms just calculates the offset from current timestamp. In other words, it does not increment a number by 1 in a setInteval (which is why it s so accurate). Hence, how bout maintaining the timer related variables in an associative array whose key will be each DOM element on which the timer is initialized?

Of course this is a very macro level thought/discussion. One other user suggested web workers. But I m personally tempted in this array idea as I don't have to worry about browsers that don't support web workers.

[rlmumford]

I actually have this working with multiple timers. It wasn't too tricky.

I store the element on the Timer object, then log all the various counts against the element data instead of in variables in global scope.

This all works because you can bind a function to a given class, so I bind the element to the incrementSeconds method.

function startTimerInterval(element) {
    $(element).data('intr', setInterval(incrementSeconds.bind(element), options.updateFrequency));
    $(element).data('isTimerRunning', true);
}

See this commit for the working code. rlmumford@731da0c

[walmik]

This looks great and thank you for putting thought and time to implement this much desired functionality! This is certainly the way forward. I m gonna play around with it a bit with multiple timers in a page. In the mean time, would you mind creating a PR for this change?

[walmik]

Extremely happy to close this long standing issue! Thanks to the excellent work by @rlmumford !