How to create a javascript timer?

Question

I want to start/display a timer on submit button event. I am using spring mvc. So on submit, it goes to the controller, performs some logic and gets redirected back to the original jsp page.The problem is the timer gets reset on page load when its redirected from controller.Once the timer is started, it shouldn't be reset until a stop timer button is clicked. How can i implement this functionality?I am using a jquery timer plugin, but its not quite working.I tried adding a counter=0 value, its not right either. This is my code:

var counter=0;

function updatecounter(){
    counter = 1;
    Example1.init();
}

var Example1 = new (function() {

    var $stopwatch, 
        incrementTime = 70, 
        currentTime = 0,
        updateTimer = function() {
            $stopwatch.html(formatTime(currentTime));
            currentTime += incrementTime / 10;
        };

    this.init = function() {
        $stopwatch = $('#stopwatch');
        Example1.Timer = $.timer(updateTimer, incrementTime, true);
    };

    this.resetStopwatch = function() {
        currentTime = 0;
        this.Timer.stop().once();
    };

    if(counter!=0){
        $(init);
    }
});

HTML markup:

<h2><span id="stopwatch">00:00:00:00</span></h2>

<input type="submit" value="Run Script" name="Run Script" class="button"onclick='updatecounter();' />

<input type="submit" value="Stop Script" name="Stop Script" class="button" onclick='Example1.resetStopwatch();/>

Did you notice that all these is JavaScript and has nothing to do with the server side at all? So Spring MVC (or other java web mvc framework) is irrelevant for the question. — Luiggi Mendoza, Nov 08 '13 at 20:27
you need to restructure your js timer to accept a starting point if given it, and then pass the current value to the server and then have it pass it back. Or, you can store it in a cookie if you want to leave the server out of it. — CrayonViolent, Nov 08 '13 at 20:40
I did found out a workaround. I created a js cookie on submit and then the next time the page loads, based on cookie value, the timer is started by default. But now I have a new problem, since I do a post to the mvc controller and redirect back to the original page, the form data is lost. May be I should try ajax instead. Any tips on how to implement. — yonikawa, Nov 08 '13 at 23:02

score 1 · Answer 1 · answered Nov 08 '13 at 20:41

I'm not going to try to create an entire application stack, so I'll keep this simple.

If you MUST redirect to the Spring Controller, then you're going to have to

Pass the start time from the page back to the controller
Pass that same start time from the controller back to the original page
Check for the start time when the page loads and
- Start the timer
- Add time to the timer equal to the difference between the start time reported from the server and now

So in pseudo-code:

if( startTime IS set ){
    timer.start();
    timer.setStartTime( startTime );
}

And this would assume that your timer simply calculates a difference from the start time to display a count.

However, the much better option would be for the page to NOT redirect to the server.
Just send off an AJAX request and let it come back whenever, and you can have your timer running the whole time.

This makes the most sense because the very nature of your question ("I need this thing to happen at the same time another thing is happening!") screams Asynchronous, which is the A in AJAX.

@rockerest- thanks man...that's what i am thinking too..need to figure how to implement it along with spring mvc. — yonikawa, Nov 08 '13 at 23:05

score 0 · Answer 2 · edited May 23 '17 at 11:50

0

Try what this person recommends.

Session variables

edited May 23 '17 at 11:50

Community

1
1

answered Nov 08 '13 at 20:37

willthefirst

1,499
2
15
21

score 0 · Accepted Answer · answered Nov 20 '13 at 17:20

Ok Finally i figured a way to fix it..On submit, I created a flag on server side and pass it to the jsp on page load. Based on the flag, it automatically starts the timer.Since its a quick process,( forward to controller and redirect back to jsp) the time delay is negligible.

How to create a javascript timer?

3 Answers3