Basic Scheduling with setTimeout & setInterval       JavaScript Method of the Month       May, 2011       Kevin Munc      ...
Do it later   setTimeoutThursday, May 19, 2011
setTimeout       • setTimeout(expression, millis)       • on the window object       • returns a numeric ID for the       ...
setTimeout(function() {          console.log(Egg:ttt%s, new Date());        }, 1500);        console.log(Chicken:t%s, new ...
var myFunc = function() {                   console.log(CoffeeScript is slick.);                };                undefine...
var myFunc = function() {                console.log(Node is okay, I guess.);             };             var myFuncTimeout...
Do it periodically   setIntervalThursday, May 19, 2011
setInterval       • setInterval(expression, millis)       • on the window object       • returns a numeric ID for the     ...
A potential use of setInterval. The best use...?  var blinker = setInterval("$(#siteLogo).toggle()", 500);               i...
var funcMaker = function() {                   return function() {                     console.log(getting funcy at %s, ne...
Handy? Yes. But use with caution.        eval is evil        The eval function (and its relatives, Function, setTimeout,  ...
Better to pass functions, not strings.         Pass functions, not strings, to setTimeout() and         setInterval()     ...
Passing arguments             // Instead of awkwardly concatenating strings,             // use an anonymous function.    ...
Questions?       Photo Credits       •   http://www.flickr.com/photos/olemartin/4074077969/       •   http://www.flickr.com/...
Upcoming SlideShare
Loading in …5
×

Basic Scheduling with setTimeout & setInterval

2,532 views
2,428 views

Published on

Method of the Month for the May meeting of the Columbus JavaScript Users Group (CBUSJS).

Published in: Technology, Travel
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,532
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Basic Scheduling with setTimeout & setInterval

  1. 1. Basic Scheduling with setTimeout & setInterval JavaScript Method of the Month May, 2011 Kevin Munc @muncmanThursday, May 19, 2011
  2. 2. Do it later setTimeoutThursday, May 19, 2011
  3. 3. 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 trickyThursday, May 19, 2011
  4. 4. 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)Thursday, May 19, 2011
  5. 5. var myFunc = function() { console.log(CoffeeScript is slick.); }; undefined setTimeout(myFunc(), 250); 54 CoffeeScript is slick. setTimeout(myFunc, 250); 55 CoffeeScript is slick.Thursday, May 19, 2011
  6. 6. var myFunc = function() { console.log(Node is okay, I guess.); }; var myFuncTimeout = setTimeout(myFunc, 5000); clearTimeout(myFuncTimeout); // myFunc is never fired.Thursday, May 19, 2011
  7. 7. Do it periodically setIntervalThursday, May 19, 2011
  8. 8. 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 trickyThursday, May 19, 2011
  9. 9. A potential use of setInterval. The best use...? var blinker = setInterval("$(#siteLogo).toggle()", 500); if (youThinkBlinkSux) { clearInterval(blinker); }Thursday, May 19, 2011
  10. 10. 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) getting funcy at Wed May 18 2011 14:51:31 GMT-0400 (EDT) getting funcy at Wed May 18 2011 14:51:31 GMT-0400 (EDT) getting funcy at Wed May 18 2011 14:51:32 GMT-0400 (EDT) getting funcy at Wed May 18 2011 14:51:32 GMT-0400 (EDT) getting funcy at Wed May 18 2011 14:51:33 GMT-0400 (EDT) getting funcy at Wed May 18 2011 14:51:33 GMT-0400 (EDT) getting funcy at Wed May 18 2011 14:51:34 GMT-0400 (EDT) clearInterval(124); undefinedThursday, May 19, 2011
  11. 11. 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.htmlThursday, May 19, 2011
  12. 12. 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=2Thursday, May 19, 2011
  13. 13. 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 BurtonThursday, May 19, 2011
  14. 14. 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_ClockThursday, May 19, 2011

×