在asp.net ajax应用程序中使用javascript倒计时计时器
本文关键字:javascript 倒计时 计时器 asp net ajax 应用程序 | 更新日期: 2023-09-27 18:29:42
在花了几个小时试图弄清楚我的应用程序中发生了什么之后,我发现我的代码设置了javascript间隔。
这是我设置间隔的代码。。。
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");
});
现在,如果有一个完整的页面重新加载,这绝对可以工作。问题是,我正在开发一个支持ajax的网站,所有内容都在updatepanal中更新。
我遇到的问题是,当updatepanel面板更新时,会创建一个新的javascript间隔,因此会在#lbTimer中添加另一个计数器,导致2个或多个倒计时计时器之间闪烁。
显然,由于脚本在每次页面加载时都在运行,因此无法清除我所看到的页面上已经运行的间隔,这会导致多个计时器。
我确实添加了以下内容,虽然解决了一段时间的问题,但我需要计时器在部分页面加载时再次更新。
if (!args.get_isPartialLoad()) {
//Timer code here
}
有人对我如何在应用程序中使用javascript倒计时计时器有任何建议或建议吗?该计时器允许我清除间隔,以便在部分页面加载时创建新的计时器?
希望我已经提供了足够的细节,但如果需要,我可以添加更多。
提前感谢您的时间和帮助!
在部分加载中写入以下内容以清除之前设置的计时器
var intervalID;
var resetTimer = function() {
if (intervalID) {
clearInterval(intervalID) };
intervalID = setInterval(function() { your code here....};