Javascript - Jquery .load() and setInterval() issue.

Question

Let's say I do this:

$("#content").load(...);

Within what I'm loading some javascript is included:

var myCounter = 0;
var myInterval = setInterval(function(){
   myCounter++;

   $("#counter-display").html("Count: "+myCounter);
});

For an unknown reason, if I reload the content with $("#content").load(...); - myInterval is now being called twice.

I tried doing something like:

if (myInterval !== undefined){
   //dont set interval again
}

However, it doesn't work. Does anyone know any method so that myInterval is cleared on .load, without needing to put the javascript outside of the loaded file?

Answer 1

Your code is executing twice.

Try checking if (typeof myInterval !== "undefined") before declaring the variable.

Answer 2

Try keeping the interval and count in the data object on the counter element, like this:

var disp = $("#counter-display");
if(!disp.data("interval")) {
  disp.data("interval", setInterval(function() {
    var count = (disp.data("count") || 0) + 1;
    disp.data("count", count).html("Count: " + count);
  }, 500));
}

A bit more code once, but much cleaner for global variables, etc.

Answer 3

You'll probably find that myInterval is being defined in some local scope.

Try using:

var myCounter = 0;
myInterval = setInterval(function(){
   myCounter++;

   $("#counter-display").html("Count: "+myCounter);
});

myInterval will now be declared in the global scope.

You can of course use clearInterval, and do clearInterval(myInterval) which will also ensure only on instance of the interval is in use.