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

时间:2012-03-30 14:11:08

标签: c# javascript jquery asp.net setinterval

花了好几个小时试图弄清楚我的应用程序中发生了什么,我发现我的代码存在设置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的网站,并且所有内容都在更新范围内更新。

我遇到的问题是,当updatepanel面板更新时,正在创建新的javascript间隔,因此正在将另一个计数器添加到#lTTimer中,导致两个或更多倒计时器之间的闪烁。

显然,当脚本在每个页面加载上运行时,无法清除我可以看到的页面上已经运行的间隔,这会产生多个计时器。

我确实添加了以下内容,whic解决了一段时间的问题,但我需要定时器再次更新部分页面加载。

if (!args.get_isPartialLoad()) {
//Timer code here
}

有没有人有任何建议或建议我如何在我的应用程序中使用javascript倒数计时器,允许我清除部分页面加载时创建新的时间间隔?

希望我已经提供了足够的细节,但如果需要,我可以添加更多细节。

提前感谢您的时间和帮助!

1 个答案:

答案 0 :(得分:0)

在部分加载中写下以下内容以清除先前设置的计时器

var intervalID; 
var resetTimer = function() {   
if (intervalID) { 
clearInterval(intervalID) };   
intervalID = setInterval(function() {    your code here....};