Script Comparison - Falling Snow

setTimeout and setInterval

In comparing my original falling snow script from 2004 to the new version written in 2011, we have already looked at the changes to the Document Object Model calls, the browser viewport size and scroll position calls, how and where the variables are defined, where the script is attached and run, and how the original document.write statement is replaced by DOM calls that create and add the tags.

Almost all of the rest of the script consists of calculations that will control the movement of the snowflakes down the page. These calculations both for the initial position of the snowflakes when the script starts and also that recalculate the position of each snowflake each time the flakes are to be moved are coded identically between the two versions of the script (apart from the substitution of the scroll position and viewport size values already covered.

There is one last difference between the two scripts. This difference relates to how the moreSnow() function is called. In the original script it was called twice - once from the end of the startSnow() script to run it for the first time and again from within the end of the moreSnow() function itself so it would run again after a short delay. Both of those calls looked like this:

 setTimeout("moreSnow()", speed);

The new script does away with the second of these calls completely and replaces the first with a setInterval call instead like this:


Now the difference between using setTimeout and setInterval is that setTimeout will run the called function once after a specified delay and since we are trying to produce an animation we needed to call it again each time that the function it called finished running in order to set it up to run again. Now a setInterval does almost exactly the same thing as the two setTimeouts do but with only the one statement. The only difference is that the function is called at regular intervals rather than waiting until it finishes running to start the next delay. This change is yet one more way in which we make this JavaScript independent of the other scripts in the page as any delays in running moreSnow() on one occassion will not delay the running of the subsequent calls.

There is one other difference in the way I have coded these two statements and that is the way that the function has been specified. Now setTimout and setInterval expect a function to be passed as the first parameter and the way I have it in the setInterval call is exactly how it should be done when there are no parameters to be passed into the function. A lot of people (me included with that 2004 script) mistakenly code that parameter as a string instead. Now what that does is to force an extra call to new Function('string') in order to convert that string into a function. So doing the conversion ourselves and simply using a function instead of a string makes the code more efficient.

Now you might be asking how to handle it when the function does need parameters. Well one option is to do what I have done with both versions of the falling snow script - which actually requires lots of parameters - and simply define them globally (restricted to within the anonymous function in the case of the new version). There are two alternatives to doing this. An option if you don't need to support Internet Explorer is to pass the parameters with the first parameter to be passed to the function in the third parameter of the setTimeout or setInterval call, the second in the fourth and so on. That doesn't work in Internet Explorer though and so for a solution that will work across all browsers we can simply wrap the function call that has the parameters inside of another anonymous function that doesn't have parameters.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow