Timer counter problem while pagination.

Question

0.00/5 (No votes)

See more:

I have the time counter on page load running like 20 mins 0 sec to 0 mins 0 secs.
In the page load it's running correctly and i'm using the pagination on same page. if click page number 2 and again its starting from the time what i have set previously but i need to count like where time left need to count continuously.

Below is my code

C#

<script type="text/JavaScript">
    function startTimer(duration, display) {
        var start = Date.now(),
            diff,
            minutes,
            seconds;
        function timer() {
            // get the number of seconds that have elapsed since 
            // startTimer() was called
            diff = duration - (((Date.now() - start) / 1000) | 0);

            // does the same job as parseInt truncates the float
            minutes = (diff / 60) | 0;
            seconds = (diff % 60) | 0;

            minutes = minutes < 10 ? "0" + minutes : minutes;
            seconds = seconds < 10 ? "0" + seconds : seconds;

            display.textContent = minutes + ":" + seconds;

            if (diff <= 0) {
                // add one second so that the count down starts at the full duration
                // example 05:00 not 04:59
                start = Date.now() + 1000;
            }
        };
        // we don't want to wait a full second before the timer starts
        timer();
        setInterval(timer, 1000);
    }

    $(window).load(function () {
        var val = $("#hdnFlag").val();
        var minval = 0;
        if (val == 20) {
            minval = 60 * 20,
            display = document.querySelector('#time');
        }
        else if (val == 25) {
            minval = 60 * 25,
            display = document.querySelector('#time');
        }
        else if (val == 30) {
            minval = 60 * 30,
            display = document.querySelector('#time');
        }
        else if (val == 35) {
            minval = 60 * 35,
            display = document.querySelector('#time');
        }
        else if (val == 40) {
            minval = 60 * 40,
            display = document.querySelector('#time');
        }
        startTimer(minval, display);
    });
    window.onbeforeunload = function () {
        return "Are you sure you want to quit this exam?";
    }
</script>

In View

HTML

<div class="time-reaming">
    <span id="time"></span> minutes!
</div>

Paging code :

<div>
                    <input type="submit" value="Submit" class="btn btn-info btn-lg" />
                    Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount
                    @Html.PagedListPager(Model, page => Url.Action("TimerCount", new { page }))
                </div>

Posted 6-Dec-15 23:50pm

jagan12013

Add a Solution

Comments

F-ES Sitecore 7-Dec-15 6:18am

You could store the start time in a cookie and if the cookie exists and has a value use that as the basis for your calculation.

So rather than "start" always being Date.now(), make it the value in the cookie if it exists, otherwise Date.now(). That way when you first view a page it works as normal, but when you view subsequent pages the timer continues from where it left off.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Thomas Nielsen - getCore · Answer 1 · 2015-12-07T01:48:00

One solution is adding a hidden element to your page where you store the tick from when your timer last run, i.e. the first read, when the timer was running like it should (count 20 minutes from.)
https://msdn.microsoft.com/en-us/library/system.datetime.ticks(v=vs.110).aspx[^]

Then when posting back you'll known at what time that client last had it's 20 minutes event and when that time has passed, you'll do whatever you want to do ever 20th minute and set it to a new DateTime.UtcNow.Ticks value

But you kind have to forget the notion of a timer. Because your pages are executed on server, the timer wont really work well, better to use some javascript that will make a TimeOut of the appropriate length based on how much time is left of the next 20 minute slot.
http://www.w3schools.com/js/js_timing.asp[^]

This timeout will happen at the client, so it will catch 20 minutes passing.

The next problem is navigating, since that is HTTP GET you're not passing values to the server unless in your querystring to inform them of what moment that client had last 20 minute action happening. Then your options are to base it on a cookie instead, which is kind last resort as those can be turned off, adding a custom bit to your querystring, which is not a miracle for SEO crawling (ugly urls don't rank well).

Ultimately for a durable solution for both scenarios, you'll need some static-like object or DB entity tracking the different client and their last 'tick_of_action' and upon request consider if now is when, possibly even monitored, in case you want the event to happen even if they left the site.