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?

A global variable `timer` to store you timer ID? Not a good idea... — Šime Vidas, Sep 21 '11 at 20:29
This looks like a duplicate of http://stackoverflow.com/questions/4758750/jquery-restart-setinterval — Dave, Sep 21 '11 at 20:31
@Dave: How so? This is asking for something completely different. Specifically how to restard a dead timer after the text of an element has changed. :) — Only Bolivian Here, Sep 21 '11 at 20:31
@Sergio Read here: http://stackoverflow.com/questions/1841916/how-to-avoid-global-variables-in-javascript — Šime Vidas, Sep 21 '11 at 20:32
@SergioTapia whoops you're right... the question on the other one seemed to be asking the same thing... but the answer wasn't answering it. — Dave, Sep 21 '11 at 20:34

score 0 · Answer 1 · answered Sep 21 '11 at 20:32

0

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.

answered Sep 21 '11 at 20:32

Guffa

687,336
108
737
1,005

Can't you check my edit, the timer isn't re enabled despite the fact that the .countdown text changed. – Only Bolivian Here Sep 21 '11 at 20:46
@Sergio -- which is because the .countdown element doesn't exist when that code is ran. place it inside a `$(document).ready(function () {` as suggested by Guffa and give it a try. – Kevin B Sep 21 '11 at 20:48
@Sergio Tapia: The `change` event is triggered when the user has changed the value in the field and changes focus to another element. It's not triggered by changing the value of the field by code. – Guffa Sep 21 '11 at 20:53
@Guffa: Gah! Then what event do you recommend I use? That's the whole issue I'm having. :) Thank for your time. – Only Bolivian Here Sep 21 '11 at 20:59
@Sergio Tapia: You could trigger the event manually when you change the value, but it's easier to just put the code in a function and call it. – Guffa Sep 21 '11 at 21:03
So *how* would I do that, that's pretty much question I asked to begin with. :) – Only Bolivian Here Sep 21 '11 at 21:13
Put the code in a function: `function startTimer() { timer = setInterval(updatetimerdisplay, 1000); }`, then call the function using `startTimer();` when you want the timer to start. – Guffa Sep 21 '11 at 21:27

score 0 · Accepted Answer · answered Sep 21 '11 at 21:12

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=...;).

I've just been told that the change event fires on inputs. I want to detect when the text inside of a `
` element changes. What event can I use? — Only Bolivian Here, Sep 21 '11 at 21:14
None. The `change` event handler can only be used to check for input changes. You can add a poller, and accomplish similar results in this way: Let `element` be the `
` element: `var p_lastString=element.innerHTML;window.setInterval(function(){if(element.innerHTML!=p_lastString){p_lastString=element.innerHTML;alert("The string has changed!")}}500);` — Rob W, Sep 21 '11 at 21:17

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

2 Answers2