[英]Using a javascript countdown timer within an asp.net ajax application
After spending hours trying to work out what's going on within my app, I have discovered there's a problem with my code that sets a javascript interval. 花了数小时试图弄清楚我的应用程序中发生了什么之后,我发现我的代码存在一个问题,该问题设置了JavaScript间隔。
Here is my code that sets the interval... 这是设置间隔的代码...
Sys.Application.add_load(function PageLoad(sender, args) {
var timer = $("#lbTimer");
var intVal = "";
var verifiedTime = Date.parse(timer.html());
if ($("#imgLock").hasClass("hidden") && !isNaN(verifiedTime) && verifiedTime != null) {
$("#imgLock").addClass("hidden");
$("#imgUnlock").removeClass("hidden");
intVal = setInterval(function () {
$("#lbTimer").html(function () {
var t = parseInt((new Date() - verifiedTime) / 1000, 10);
t %= 3600;
var m = Math.floor(t / 60);
var s = Math.floor(t % 60);
if (m == 0 && s == 0) {
$("#lbLocked").removeClass("hidden");
$("#imgLock").removeClass("hidden");
$("#imgUnlock").addClass("hidden");
$("#lbTimer").html("");
window.clearInterval(intVal);
verifiedTime = "";
} else {
if (s == 0) {
$(this).html((m + ":0" + s).replace("-", ""));
} else {
$(this).html((m + 1 + ":" + s).replace("-", ""));
}
if (s > -10) {
if (m == -1) {
$(this).html($(this).html().replace(":", ":0"));
} else {
$(this).html($(this).html().replace("-", "0"));
}
} else {
$(this).html($(this).html().replace("-", ""));
}
}
});
}, 1000);
$("#lbTimer").removeClass("hidden");
});
Now this works absolutely fine if there a fullpage reload. 现在,如果重新加载整页,这绝对可以正常工作。 Problem is that I'm developing an ajax enabled website and everything updates within an updatepanal. 问题是我正在开发一个支持ajax的网站,并且在updatepanal中进行所有更新。
The problem I'm encountering is that when the updatepanel panel updates a new javascript interval is being created so another counter is being added into #lbTimer resulting in a flicker between 2 or more countdown timers. 我遇到的问题是,当updatepanel面板更新新的javascript间隔时,正在创建另一个计数器,因此正在#lbTimer中添加另一个计数器,导致两个或多个倒数计时器之间出现闪烁。
Obviously as the script is running on each pageload there's no way of clearing the interval that's already running on the page that I can see, which is resulting in multiple timers. 显然,由于脚本在每个页面加载上运行,因此无法清除我可以看到的页面上已经运行的间隔,这会导致多个计时器。
I did add in the following, whic solved the problem for a while, however I need the timer to update again on partial pageloads. 我确实添加了以下内容,从而解决了一段时间的问题,但是我需要计时器在部分页面加载时再次进行更新。
if (!args.get_isPartialLoad()) {
//Timer code here
}
Does anyone have any suggestions or recommendations how I can use a javascript countdown timer in my app allowing me to clear the interval to create a new one on partial page loads? 是否有人对我如何在我的应用程序中使用javascript倒数计时器有任何建议或建议,以允许我清除间隔以在部分页面加载时创建一个新的计时器?
Hopefully I've given enough detail, but I can add more if required. 希望我已经提供了足够的细节,但是如果需要,我可以添加更多。
Thanks in advance for time and help! 在此先感谢您的时间和帮助!
Write the followig in partial load to clear off the timer set previously 在部分负载下写入Followig以清除先前设置的计时器
var intervalID;
var resetTimer = function() {
if (intervalID) {
clearInterval(intervalID) };
intervalID = setInterval(function() { your code here....};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.