JavaScript’s setTimeout and how to use it with your methods

Update (May 2015): The following article deals with the nowadays well know JavaScript scope behavior and it’s much better explained/solved elsewhere.

While working on real time web chat application I run into problems with JavaScript’s setTimeout function. I would like to write down what I learned. It may save you some time, next time you’ll need to use this function.

Shortly about setTimeout

setTimeout is a simple JavaScript function used to repeatedly call some function after a specified amount of time. It takes two required parameters and an unspecified number of optional ones. Like this:

setTimeout(functionToCall, time, param1, param2, ....);functionToCall is the name of the function which will be called after time millisecond. You either use reference like in the example above or a string representing a call to the function:

setTimeout('functionToCall()', time, ...)The optional parameters can be used to pass any number of parameters to our functionToCall.

Where’s the catch?

Everything works as expected until you try to call a method inside your ‘class’ (there are no real classes in JavaScript). Something like this won’t work:

setTimeout(this.methodToCall, time);Passing a string representation instead of reference doesn’t work either.

The solution

I found the solution after a while searching in Google Code Search. The above example needs to be rewritten like this:

setTimeout(function(thisObj) { thisObj.methodToCall(); }, time, this);Here we are passing reference to our class as an optional parameter of the setTimeout function. In the called function we catch it and suddenly we can use it to call our method. I have no idea why such a simple thing needs to be so complicated but it only demonstrates that you need to learn a few tricks when you want to do real OOP in JavaScript.

iBox

Ahmed Farooq saw my posts about Ligthbox and ThickBox image displaying solutions and send me an email that he develops something similar which is definitely worth mentioning.

iBox weights just 11 kb and supports image displaying and various other types of content, like HTML code. It has got a few useful configuration options that you can embed directly into the links. One big advantage is that the script is self-contained, so it would not conflict with other libraries you might include.

So if you want to say goodbye to the old school JavaScript pop-up windows, you have plenty of alternatives to choose from. Lightbox started it all, ThickBox is my personal favorite and iBox has the potential to outrun them both. Try them all and choose one that best suits your project.

Update (May 2015): Links removed, as they no longer work 🙁

Here comes the ThickBox

I found even better solution for displaying images than Lightbox. It’s called ThickBox, it’s build on jQuery library, together they have only 27 Kb and does a few things that Lightbox can’t. It automaticaly resizes the image based on the resolution, can display any HTML content, so it can be used not just for images. All around it’s much better.

The jQuery library alone looks promising. It’s very small and the idea behind looks fun. I am planning to use it on one of my AJAX projects. I’ll report my experiences with it.