setInterval javascript calls do not go away after ajax load

Question

I'm using MVC with some partial rendering and ajax calls. In one of my result tables I have a field that is a timer.

The following code is on my partial view that is rendered every 30 seconds. One of the fields is an active timer that displays to the user:

<td><div id="@someID" class="nobutton"></div><script>setInterval(function () { startTimer('@startDateTime', '@someID') }, 500);</script></td>

This works great but after the ajax call is made to refresh the partial, the interval function is still calling the old IDs (someID) that are no longer there.

Here is the javascript for the timer:

<script type="text/javascript">
    function startTime(dt, field){
        var field = document.getElementById(field);
        if (field == null)
            return;

        var rowTime = new Date(dt);
        var rowTimems = rowTime.getTime(rowTime);

        var currentTime = new Date();
        var currentTimems = currentTime.getTime(currentTime);

        var difference = currentTimems - rowTimems;

        var hours = Math.floor(difference / 36e5),
            minutes = Math.floor(difference % 36e5 / 60000),
            seconds = Math.floor(difference % 60000 / 1000);

        field.innerHTML = formatTime(hours) + ":" + formatTime(minutes) + ":" + formatTime(seconds);
</script>

And the call on the main page that refreshes the partial is pretty simple:

var t = setInterval(function () {
            $.ajax({
                url: "MYURL",
                type: "GET",
                cache: false,
                success: function (data) {
                    $("#summary").html(data);                    
                }
            });
        }, 30000);

Is there a way to kill the old timers? Why are they still running?

You need to clear the interval before doing ajax refresh again. — PSL
– PSL, Commented Sep 26, 2013 at 23:19

Travis J · Accepted Answer · 2013-09-30 14:12:18Z

3

The reason that code is still executing is that the interval was never stopped. Try this in your partial instead. It will check if the previous interval timer is present and clear it.

<td><div id="@someID" class="nobutton"></div>
<script>
 if( window.prtInt != void 0 ) clearInterval(window.prtInt);//void 0 means undefined
 window.prtInt = setInterval(function () { startTimer('@startDateTime', '@someID') }, 500);
</script></td>

If you wish to clear out all the timers on the entire page (may have undesirable affects) then you may get the integer for a new timer, and loop up to that number clearing intervals that are still present.

<script>
 function clrTimers(){
  var clr = setTimeout(function(){},10);
  for( var i = 0; i < clr; i++ ){
   clearInterval(i);
  }
 }
</script>

If you wish to skip some, then you could include them with the continue keyword if you knew them. Such as

for( var i = 0; i < clr; i++ ){
 if( i == t ) continue; //I believe t was your ajax interval variable
 clearInterval(i);
}

edited Sep 30, 2013 at 14:12

answered Sep 26, 2013 at 23:19

Travis J

82.6k43 gold badges213 silver badges280 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Papa Burgundy Over a year ago

I think this would work great if I only had 1 row of data. Is there a way to clear all intervals?

Travis J Over a year ago

@PapaBurgundy - There is. However, that would also clear the timer for the ajax call you are making. See my edit above.

Papa Burgundy Over a year ago

I ended up declaring a javascript Array on the main page and adding the setInterval integer ID to the array when it builds each row. Then on the ajax reload I clearInterval for any ID in the array. Your answer got me headed in that direction, thanks.

A.O. · Accepted Answer · 2013-09-26 23:19:33Z

2

setInterval(function () { startTimer('@startDateTime', '@someID') }, 500);

Will continue to execute with the same values until it is cleared with clearInterval(). In order to clear it you need to save it a var and feed that to the clearInterval() function.

answered Sep 26, 2013 at 23:19

A.O.

3,7636 gold badges32 silver badges49 bronze badges

Collectives™ on Stack Overflow

setInterval javascript calls do not go away after ajax load

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related