Как я могу снова включить setInterval после того, как я вызвал clearInterval?

Вот мой javascript:

<script type="text/javascript">
var timer;

$(document).ready(function () {
    timer = setInterval(updatetimerdisplay, 1000);

    $('.countdown').change(function () {
        timer = setInterval(updatetimerdisplay, 1000);
    });

    function updatetimerdisplay() {
        $(".auctiondiv .auctiondivleftcontainer .countdown").each(function () {
            var newValue = parseInt($(this).text(), 10) - 1;
            $(this).text(newValue);

            if (newValue >= 9) {
                $(this).css("color", "");
                $(this).css("color", "#4682b4");
            }

            if (newValue == 8) {
                $(this).css("color", "");
                $(this).css("color", "#f3982e");
            }

            if (newValue == 5) {
                $(this).css("color", "");
                $(this).css("color", "Red");
            }

            if (newValue <= 1) {
                //$(this).parent().fadeOut();
                clearInterval(timer);
            }
        });
    }
});

var updateauctionstimer = setInterval(function () {
    $("#refreshauctionlink").click();
}, 2000);

function updateauctions(response) {
    var data = $.parseJSON(response);

    $(data).each(function () {
        var divId = "#" + this.i;
        if ($(divId + " .auctiondivrightcontainer .latestbidder").text() != this.b) {
            $(divId + " .auctiondivrightcontainer .latestbidder").fadeOut().fadeIn();
            $(divId + " .auctiondivrightcontainer .auctionprice .actualauctionprice").fadeOut().fadeIn();
            $(divId + " .auctiondivleftcontainer .countdown").fadeOut().fadeIn();
        }

        $(divId + " .auctiondivrightcontainer .latestbidder").html(this.b);
        $(divId + " .auctiondivrightcontainer .auctionprice .actualauctionprice").html(this.p);

        if ($(divId + " .auctiondivleftcontainer .countdown").text() < this.t) {
            $(divId + " .auctiondivleftcontainer .countdown").html(this.t);
        }
    });
}
</script>

По сути, я хочу снова включить таймер, если какой-либо элемент .countdown изменил текст.

Текст изменится из-за вызова AJAX, который я использую для обновления этого значения.

В настоящее время таймер не включается, и обратный отсчет останавливается после изменения значения .Countdown. Я думаю, что событие change() срабатывает при изменении текста элемента. Это правильно?

Какие-то явные ошибки с моей стороны?


person Only Bolivian Here    schedule 21.09.2011    source источник
comment
Глобальная переменная timer для хранения идентификатора таймера? Не хорошая идея...   -  person Šime Vidas    schedule 22.09.2011
comment
@Sime: Просвети меня, пожалуйста! Я зеленый для javascript. :)   -  person Only Bolivian Here    schedule 22.09.2011
comment
Это выглядит как дубликат stackoverflow.com/questions/4758750/jquery-restart-setinterval   -  person Dave    schedule 22.09.2011
comment
@ Дэйв: Как так? Это требует совсем другого. В частности, как перезапустить мертвый таймер после изменения текста элемента. :)   -  person Only Bolivian Here    schedule 22.09.2011
comment
@Sergio Читайте здесь: stackoverflow. ком/вопросы/1841916/   -  person Šime Vidas    schedule 22.09.2011
comment
@SergioTapia К сожалению, вы правы ... вопрос на другом, казалось, задавал то же самое ... но ответ не был ответом на него.   -  person Dave    schedule 22.09.2011


Ответы (2)


Ваш код содержит цикл и условие:

function updatetimerdisplay() {
    $(".auctiondiv .auctiondivleftcontainer .countdown").each(function () {
    ...
        if (newValue <= 1) {
            //$(this).parent().fadeOut();
            clearInterval(timer);
        }
        ...
    }
}

Очень вероятно, что один из этих элементов имеет значение, удовлетворяющее условию newValue <= 1. В этом случае таймер остановится. Даже если вы измените содержимое поля ввода, таймер сразу же остановится после этого запуска.

Если вам нужно поддерживать несколько таймеров, используйте кошелек таймеров (var timers = {};timers.time1=... или var timers = [];timers[0] = ...). Если вам нужно поддерживать только несколько тайм-аутов, вы даже можете использовать переменные (var timer1=... ,timer2=..., timer3=...;).

person Rob W    schedule 21.09.2011
comment
Мне только что сказали, что событие изменения срабатывает на входах. Я хочу определить, когда изменяется текст внутри элемента <p>. Какое событие я могу использовать? - person Only Bolivian Here; 22.09.2011
comment
Никто. Обработчик событий change можно использовать только для проверки изменений ввода. Вы можете добавить средство опроса и добиться аналогичных результатов следующим образом: Пусть element будет элементом <p>: var p_lastString=element.innerHTML;window.setInterval(function(){if(element.innerHTML!=p_lastString){p_lastString=element.innerHTML;alert("The string has changed!")}}500); - person Rob W; 22.09.2011

Вы пытаетесь связать событие изменения до того, как элементы будут созданы. Поместите этот код в обработчик событий ready:

$(document).ready(function () {
  timer = setInterval(updatetimerdisplay, 1000);

  $('.countdown').change(function () {
    timer = setInterval(updatetimerdisplay, 1000);
  });

});

Вы также можете установить для переменной timer идентифицируемое значение, когда таймер выключен (например, null), чтобы вы могли проверить это значение перед запуском таймера, чтобы предотвратить запуск нескольких таймеров.

person Guffa    schedule 21.09.2011
comment
Не могли бы вы проверить мое редактирование, таймер не включается, несмотря на то, что текст .countdown изменился. - person Only Bolivian Here; 22.09.2011
comment
@Sergio - это потому, что элемент .countdown не существует при запуске этого кода. поместите его внутрь $(document).ready(function () {, как предложил Guffa, и попробуйте. - person Kevin B; 22.09.2011
comment
@Sergio Tapia: событие change запускается, когда пользователь изменил значение в поле и перевел фокус на другой элемент. Он не запускается при изменении значения поля по коду. - person Guffa; 22.09.2011
comment
@Guffa: Гах! Тогда какое событие вы рекомендуете мне использовать? Вот и вся проблема, которая у меня есть. :) Спасибо за ваше время. - person Only Bolivian Here; 22.09.2011
comment
@Sergio Tapia: вы можете инициировать событие вручную при изменении значения, но проще просто поместить код в функцию и вызвать ее. - person Guffa; 22.09.2011
comment
Итак, как мне это сделать, это в значительной степени вопрос, который я задал для начала. :) - person Only Bolivian Here; 22.09.2011
comment
Поместите код в функцию: function startTimer() { timer = setInterval(updatetimerdisplay, 1000); }, затем вызовите функцию, используя startTimer();, когда вы хотите запустить таймер. - person Guffa; 22.09.2011