Cleaning up setinterval’s and settimeout’s in jQUery with delay() and queue()

I came across some code that was using a tangled web of setInterval ‘s and setTimeout ‘s to do… something. I wasn’t really sure what at first.

Here’s the code:

After some investigating, I figured out two things — what the code was supposed to do, and what the code was actually doing.

Digging In

So what was the code supposed to do? Let’s find out with some comments.

That all makes sense, right? Well, the problem is… it doesn’t. The animation runs once, and doesn’t repeat. But why?

At first I thought the issue was the logic. Surely something this hard to follow is missing something. But, reading over the code, it actually does do what it was meant to. It takes some text that’s set to opacity 0, fades it to 1, then after a few seconds fades it back to 0. But we see with the setInterval , this is supposed to happen every 6 seconds instead of just the one time.

As it turns out, the real problem is how the animatedText  function is being called. Instead of a reference to a function being set as the first parameter in setInterval , the function call is set. This means that the function is run once (as expected), but on the next interval there is no reference to a function, so the interval has no idea what to do with it. So, to fix this snippet, all we really needed to do was change the last line to setInterval(animatedText, 6000); .

The Fix

This same issue seems to come up a lot, so in the spirit of helping out any future developers that come across this code in the wild, I though I would ditch the timeouts and intervals all together and write some code that is easier to read and understand, using jQuery’s delay()  and queue()  functions:

With this, you only need to call animateSomeText  once, and it will take care of itself. It’s also much easier to read and understand what the code is trying to do because we’re delaying for a set amount of time after each animation, instead of having to do millisecond math with out animations and timeout’s which should save us from a few headaches down the road if we need to alter the delays or change the animation speeds.

Leave a Reply

Your email address will not be published. Required fields are marked *