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

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.