Использование таймера обратного отсчета JavaScript в ajax-приложении asp.net - PullRequest
Новая
       6

Использование таймера обратного отсчета JavaScript в ajax-приложении asp.net

0 голосов
/ 30 марта 2012

Проведя часы, пытаясь понять, что происходит в моем приложении, я обнаружил, что есть проблема с моим кодом, который устанавливает интервал 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, и все обновляется в пределах панели обновлений.

Проблема, с которой я сталкиваюсь, заключается в том, что при обновлении панели панели обновлений создается новый интервал JavaScript, поэтому добавляется еще один счетчик.в #lbTimer, что приводит к мерцанию между 2 или более таймерами обратного отсчета.

Очевидно, что, поскольку скрипт выполняется при каждой загрузке страницы, нет способа очистить уже запущенный интервал на странице, которую я вижу, что приводит кв нескольких таймерах.

Я добавил следующее, что решило проблему на некоторое время, однако мне нужно, чтобы таймер снова обновлялся при частичной загрузке страниц. 

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

У кого-нибудь естьпредложения или рекомендации, как я могу использовать таймер обратного отсчета javascript в своем приложении, позволяющий очистить интервал для создания нового при частичной загрузке страницы?

Надеюсь, я дал достаточно подробностей, но могу добавить больше, еслитребуется.

Заранее спасибо за время и помощь!

1 Ответ

0 голосов
/ 30 марта 2012

Запишите следующее при частичной загрузке, чтобы сбросить таймер, установленный ранее 

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