Meet the Timers: setTimeout, setInterval, and requestAnimationFrame

Learn how to delay execution of your code to the specified (or right) time by using setTimeout, setInterval, and requestAnimationFrame

[@sweeball]

Excellent!

[@truumann199]

thank you.

[@davideugene7911]

Merci :)

[@misterhtmlcss]

@kirupa can I use a time delay to limit the loading of JS scripts until 3-4 seconds later? 90% of my page doesn't need JS to start being useful to the client/viewer. I'm just wondering if this is something Google will frown upon or if that's a great way to speed up your page load time while still delivering the slick JS+ experience with standard HTML/CSS. Thoughts? PS. I've even read somewhere that guys use JS to load CSS and JS related to a specific form factor e.g. phones get only phone related HTML/CSS/JS for that platform size.

[@kirupa]

You could use "async" or "defer" on your script tags to load JS after your content has loaded. I write about them here: www.kirupa.com/html5/running_your_code_at_the_right_time.htm I think "async" is good enough, and you won't need to use a timer to load JS at a later time :P Regarding your PS, you can totally do that if you want to REALLY optimize how your content loads. I think that is overkill haha.

[@sumanth3036]

I know ur blog. U are awesome

[@rickyu1978]

just bought your kindle book.. question do you have an update for es6?

[@kirupa]

rickyu1978 No plans yet, for a lot of ES6 goes beyond the basics the book focuses on :-)

[@Gerald-iz7mv]

Hi, could you explain what the difference between requestAnimationFrame and requestAnimFrame is? which option do you refer to use and why? here are two examples: ideone.com/AwAFlq why does requestAnimFrame require a "window.setTimeout(callback, 1000 / 60);" and requestAnimationFrame not? i got the first example from here: codereview.stackexchange.com/questions/60216/gameloop-with-requestanimationframe

[@kirupa]

Gerald - from your example, requestAnimFrame is just a custom function that wraps requestAnimationFrame in a way to provide support for older browsers. It provides vendor-prefixed versions for older browsers as well as the setTimeout approach for browsers EVEN OLDER than the ones that need a vendor-prefixed version :P I'd say that you should just use requestAnimationFrame without worrying about browser fallbacks. Today, requestAnimationFrame has nearly universal coverage: caniuse.com/#feat=requestanimationframe. You should be safe to use it directly without doing anything extra.

[@Gerald-iz7mv]

so the example (ideone.com/AwAFlq) in line 1 - line 45 is good? it does not use a "window.setTimeout(callback, 1000 / 60);" ... ok? how can i add cancelAnimationFrame in that example (requestAnimationFrame example)?

[@kirupa]

Gerald Stan The example here should help: www.kirupa.com/html5/animating_with_requestAnimationFrame.htm :P

[@Gerald-iz7mv]

Nice article. They use setTimeout to slow down the animation e.g. 10 frames / second instead 60fps... So I only need the following vendor specific code to support old browsers? (function() { var w=windows, raf="RequestAnimationFrame"; window.requestAnimationFrame = w['webkit'+raf] || w['moz'+raf] || w['o'+raf] || ['ms'+raf] ; }());

[@kirupa]

Yep! An even simpler version of that looks like this: var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

[@muthukumaranmurugaiyan9451]

are you tamil