How can I re enable a setInterval after I called clearInterval?

Question

Here's my 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>

Basically, I want to turn the timer back on, if any .countdown element has it's text change.

The text will change because of an AJAX call I use to update that value.

Currently the timer doesn't re enable and the countdown freezes after the value of .Countdown is changed. I think that the change() event fires when the text of an element changes. Is this correct?

Any glaring mistakes on my part?

Answer 1

Your code contains a loop and condition:

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

It's very likely that one of these elements have a value which satisfy the condition newValue <= 1. In that case, the timer will stop. Even when you change the contents of an input field, the timer will immediately stop after that run.

If you have to support multiple timers, use a wallet of timers (var timers = {};timers.time1=... or var timers = [];timers[0] = ...). If you have to support only a few timeouts, you can even use variables (var timer1=... ,timer2=..., timer3=...;).

Answer 2

You are trying to bind the change event before the elements exist. Put that code inside the ready event handler:

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

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

});

You also might want set the timer variable to an identifiable value when the timer is off (e.g. null), so that you can check for that value before you start a timer to prevent from starting multiple timers.