Super geek Paul Irish posted an excellent video about his finding from the (not so) magical, jQuery source. If you have yet to indulge yourself in syntactical art, take a look at the source: bit.ly/jqsource, it’s not as scary as you think it is. Among the amazing things he goes over, I found the setInterval “loop” the coolest.

There are two JavaScript functions that are usually grouped together when doing anything with timing: setInterval and setTimeout. As their name suggests, setInterval executes a piece of code in intervals. setTimeout excecutes a piece of code after a certain amount of time. Each one is pretty awesome in it’s own right, however the way you use it can really bring out it’s true awesomeness. Thankfully, they use the same code format:

setTimeout(function(){alert("POW!")}, 1000);

setInterval(function(){alert("BANG!")}, 1000);

Each function takes two parameters (code, delay).
NOTE: The delay is in milliseconds, so  5 seconds = 5000.

Oftentimes, it’s necessary to execute a piece of code repeatedly. For example, lets say that in order for your application to start, you need to make sure that the application is connected to the Internet. You want to check more than once because the user may be having connection issues; their connection may not be immediately available when they start your app, but rather it may take about 5 seconds for a valid connection to establish.

You can use setInterval() to continuously check the connection every millisecond. Once a connection is established, your app can run. You could use setInterval(). Or, your can be a Badass Super Power Ninja and check this Zef knowledge Paul drops.

Let’s say that you want to use setInterval to perform some action at an interval (hence the name!). What if the function you want to execute takes longer than your interval? Take this awful example as an example:

setInterval(function(){
alert('yayQuery!');
}, 500);

For arguments sake, lets say that this alert will take over 3 seconds. This means that every half second your function will execute. But if your alert takes 3 seconds… the interval is set for every half second… what is an engine to do?? Crash, thats what (,,,will happen, eventually). Now what?

Use setTimeout recursively like so:

function beAwesome(){
alert("I am awesome");
}
(function doIt(){
beAwesome();
setTimeout(doIt, 500);
})();

Let’s break this down:

We first have  beAwesome(),a function that I want to continuously run in an interval. I then have a self invoking function (a function that immediately runs) that calls my beAwesome() function. After half a second, it calls itself (doIt()) to do it (execute) all over again.

The beauty about this technique is that no matter how long beAwesome() takes to execute, it won’t fudge up your process. Since it’s a linear execution, within the doIt() function, beAwesome() is called and executed. AFTER it’s done doing what it needs to do (which might take longer than half a second), it then calls it’s parent (doIt()) to rerun the code again.

Make sense? Of course it does!

For your brain: