Basic Scheduling with setTimeout & setInterval

Basic Scheduling with setTimeout & setInterval

JavaScript Method of the Month
May, 2011
Kevin Munc
@muncman

Thursday, May 19, 2011

Do it later setTimeout


setTimeout

• setTimeout(expression, millis)

• on the window object

• returns a numeric ID for the
timeout

• companion clearTimeout(id)
function

• does not block execution

• expressions can get tricky


setTimeout(function() {
console.log('Egg:ttt%s', new Date());
}, 1500);
console.log('Chicken:t%s', new Date());

Chicken:! Wed May 18 2011 09:55:43 GMT-0400 (EDT)
Egg:! ! ! Wed May 18 2011 09:55:45 GMT-0400 (EDT)


var myFunc = function() {
console.log('CoffeeScript is slick.');
};
undefined
setTimeout('myFunc()', 250);
54
CoffeeScript is slick.
setTimeout(myFunc, 250);
55
CoffeeScript is slick.


var myFunc = function() {
console.log('Node is okay, I guess.');
};

var myFuncTimeout = setTimeout(myFunc, 5000);
clearTimeout(myFuncTimeout);

// myFunc is never fired.


Do it periodically setInterval


setInterval

• setInterval(expression, millis)

• on the window object

• returns a numeric ID for the
interval

• companion clearInterval(id)
function

• does not block execution

• expressions can get tricky


A potential use of setInterval. The best use...?

var blinker = setInterval("$('#siteLogo').toggle()", 500);

if (youThinkBlinkSux) { clearInterval(blinker); }


var funcMaker = function() {
return function() {
console.log('getting funcy at %s', new Date());
}
};
undefined
setInterval(funcMaker(), 500);
124
getting funcy at Wed May 18 2011 14:51:30 GMT-0400 (EDT)
clearInterval(124);
undefined


Handy? Yes. But use with caution.

eval is evil
The eval function (and its relatives, Function, setTimeout,
and setInterval) provide access to the JavaScript compiler. This
is sometimes necessary, but in most cases it indicates the presence of
extremely bad coding. The eval function is the most misused feature
of JavaScript.
- quoted from http://www.jslint.com/lint.html


Better to pass functions, not strings.

Pass functions, not strings, to setTimeout() and
setInterval()

The setTimeout() and setInterval() methods are very closely
related to eval. If they are passed a string, then after the specified
delay, that string will be evaluated in exactly the same way as with
eval, including the associated performance impact.
These methods can, however, accept a function as the first parameter,
instead of a string. This function will be run after the same delay, but can
be interpreted and optimized during compilation, with improved
performance as a result.

- quoted from http://dev.opera.com/articles/view/efficient-javascript/?page=2


Passing arguments

// Instead of awkwardly concatenating strings,
// use an anonymous function.
var levar = 'Geordi la Burton';
undefined
var logIt = function(logThis) { console.log(logThis); }
undefined
setTimeout(function() { logIt(levar); }, 500);
27
Geordi la Burton


Questions?

Photo Credits
• http://www.flickr.com/photos/olemartin/4074077969/

• http://www.flickr.com/photos/freefoto/5089754554/

• http://www.flickr.com/photos/grufnik/4434081102/

• http://www.flickr.com/photos/simpologist/16734948/

• http://www.flickr.com/photos/bluedelliquanti/3395618720/

• http://blinktag.com/origins-of-the-blinktag/

Prague Orloj Astronomical Clock
• http://en.wikipedia.org/wiki/Prague_Astronomical_Clock


Basic Scheduling with setTimeout & setInterval

Recommended

Recommended

More Related Content

What's hot

What's hot (11)

Viewers also liked

Viewers also liked (7)

Similar to Basic Scheduling with setTimeout & setInterval

Similar to Basic Scheduling with setTimeout & setInterval (13)

More from Kevin Munc

More from Kevin Munc (9)

Recently uploaded

Recently uploaded (20)

Basic Scheduling with setTimeout & setInterval