Question

I’m using jQuery to “blink” some text when loading (after an AJAX call), but whenever I call clearInterval, I get an “undefined” error.

Here’s a snippet of my code:

OrderId="a12345"; 
var AllIDs = {}; 

AllIDs[OrderId] = setInterval(
    function() {j$("#" + OrderId + "_MessageListSize").fadeIn(200).fadeOut(200)},
    200
);

Then later, after the AJAX call completes:

OrderId="a12345"; var myid = AllIDs[OrderId]; clearInterval(myid);

Why won’t clearInterval stop the animation? Does it have to do with how I’m using associative arrays object literals?

Thanks in advance!

Answer 1

JavaScript doesn’t have associative arrays, those are object literals. HTML IDs can’t start with a number. Your problem is you are scheduling events too quickly and they’re getting backed up. Every 200ms, you have it set to schedule two tasks that each take 200ms to complete (400ms).

You could tweak your intervals but it is really a better idea to use setTimeout() and schedule the next timeout in the animation callback if the AJAX hasn’t completed yet otherwise do nothing and it will halt. No need to clearInterval.

Something like this…

function scheduleBlink() {
   AllIDs[OrderId] = setTimeout(
    function() {
        j$("#" + OrderId + "_MessageListSize").fadeIn(200).fadeOut(200, function () {
             if (!ajaxDone) {
               scheduleBlink();
             }
             else {
               return;
             }
        }))
    },
    200
   );
}

scheduleBlink()