在asp.net ajax应用程序中使用javascript倒计时计时器

Using a javascript countdown timer within an asp.net ajax application

本文关键字:javascript 倒计时 计时器 asp net ajax 应用程序      更新时间:2023-09-26

在花了几个小时试图弄清楚我的应用程序中发生了什么之后,我发现我的代码设置了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....};