分页时定时器计数器问题。 [英] Timer counter problem while pagination.

问题描述

我的页面加载时间计时器运行时间为20分0秒0分0秒0。

在页面加载它运行正常我正在使用在同一页面上的分页。如果点击页码2并再次从我之前设置的时间开始，但我需要计算时间需要连续计算的时间。



以下是我的代码

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

<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

<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>

推荐答案

（窗口）.load（function（）{
var val =

(window).load(function () { var val =

（ #hdnFlag）。val（）;
var minval = 0 ;
如果（val == 20 ）{
minval = 60 * 20 ，
display = document.querySelector（' #time'）;
}
else if （val == 25 ）{
minval = 60 * 25 ，
display = document.querySelector（' ＃时间'）;
}
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 您确定要退出此考试吗？;
}
< / script >

("#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

<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>

一个解决方案是在您的页面中添加一个隐藏元素，您可以在其中存储勾选时间你的计时器上次运行，即第一次读取，当计时器正常运行时（计算20分钟）。

https://msdn.microsoft.com/en-us/library/system.datetime.ticks（v = vs.110）的.aspx [ ^ ]



然后当回发时你会知道客户最后一次有20分钟的事件，那时候已经过去了，你会做任何你想做的事情20分钟a nd将其设置为新的DateTime.UtcNow.Ticks值



但你必须忘记计时器的概念。因为您的页面是在服务器上执行的，所以计时器不会真正运行良好，最好使用一些javascript，根据下一个20分钟的插槽剩余时间，使TimeOut具有适当的长度。

http://www.w3schools.com/js/js_timing.asp [ ^ ]



此超时将在客户端发生，因此它将持续20分钟通过。



下一个问题是导航，因为这是HTTP GET你没有将值传递给服务器除非在你的查询字符串中告知他们客户最后20分钟的行动发生的时刻。然后你的选择是基于cookie，这是最后的手段，因为可以关闭它们，为你的查询字符串添加一个自定义位，这不是搜索引擎优化的奇迹（丑陋的网址排名不好）。



最终对于这两种情况的持久解决方案，您需要一些类似静态的对象或数据库实体跟踪不同的客户端及其最后一次'tick_of_action'并根据要求考虑现在是否何时，甚至可能被监控，以防您希望事件发生，即使他们离开了网站。

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.

这篇关于分页时定时器计数器问题。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！