Link to home
Start Free TrialLog in
Avatar of claire89
claire89

asked on

Instantiate animation object

Hi, I have been struggling with this code for some time:

JSBin link

What it does is to create multiple pie timers that will start when clicked.
The problem is when I start a timer and change to another page and back again the timer resets, I know that I somehow need to instantiate the timer with some id but since I have limited knowledge of javascript I can't figure it out, how to make it work.
If you guys have any ideia on where to start or how can I accomplish this task, I would be very thankful :)
If you need more information please just ask.

Best regards.
Avatar of Rainer Jeschor
Rainer Jeschor
Flag of Germany image

Hi,
could you please explain what you mean with "change to another page"?
What is your final requirement?
Thanks.
Rainer
Avatar of claire89
claire89

ASKER

I'm using this code on a jquery mobile application, the problem is not demonstrated on the code I provided, the problem appears when I start a timer and with the timer still on, I change to another view, come back and the timer has reseted.
I know that I have to save the instance of the timer object somewhere so that the timer will still run even after I leave the "view".

The requirement is that I can start like 2 or 3 timers, leave the current timer "view", come back and the timers are still rolling.

I hope it helped to clarify :)
Hi,
OK that make some things more clear.
IMHO you would need to use some kind of local storage (if this is an app) or cookie, to both store the timer id as well as the timer start time and use that for instantiation.
HTH
Rainer
Thanks for the answer, but how do I local storage this specific object, any ideia?
The timer would not keep running in the background when you navigate out of the page, this is how its supposed to be. The only way I can think of is to have a parent page with an IFRAME, the timer runs in the parent page and children pages are navigated in the iframe. I have used this technique to periodically load a sub-page in an iframe.
I agree with ambience,  any and ALL javascript is abandoned, stop executing, no functions or variables from JS exist once the web page is closed.  This is JS the functioning you need to continue -
        data.timer = setInterval(function (o) {
If you leave that page, this will no longer exist, much less keep running.

Also, if you do an invisible "parent" page, then place an iframe in it to show (display) your many pages, you can place the Javascript in the parent page with the -
    data.timer = setInterval(function (o) {
BUT you will need to greatly change the way your timer works! You have code like this -
       $this.find('.percent').html(Math.round(secs) + '')

the $this variable used here WILL NOT EXIST, after you leave the timer page, but more than that, it WILL NOT EXIST, even if you show the timer page again, as Javascript or Jquery can not relate any page references like $this  to another page load, even if it is the same page address.
Thanks for the answers,  I know what is the problem now but since I'm a beginner with javascript can you elaborate more on the "data.timer = setInterval(function (o) {", Slick812.

Thanks in Advance.
ASKER CERTIFIED SOLUTION
Avatar of Member_2_248744
Member_2_248744
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial