Problems with Timeouts

There are some problems that you might encounter using setTimeout. The most common is that you do not get a zero timeout in practice. The obvious reason is that the function is not called until the code that used the setTimeout finishes. There also might be other events that need to be processed before the function is called. In addition different browsers set minimum times and 4ms is the shortest delay specified by HTML5. Often this makes no difference, but if you need the maximum efficiency then you need to take a different approach to implementing an asynchronous function, see Chapter 6.

You can also pass parameters to the delayed function but browsers differ in how they handle this. In most cases it is simpler to use closure to provide parameters. Also notice that when the function is called this will be the global window object, rather than what it was when you invoked setTimeout. This is generally only a problem if you try to call a function as an object method. 

Summary

• A JavaScript program is a collection of event handlers waiting for something to happen.
  
  
• There is only one thread of execution in a JavaScript program and if an event handler takes too long then the UI freezes.
  
  
• Using a single threaded event based UI forces us to introduce the idea of asynchronous tasks or functions that return before their work is complete - they are non-blocking.
  
  
• This in turn causes us to have to invent and use the idea of a callback function which is called to process the result of an asynchronous function.
  
  
• A callback is like an event handler that is fired when something happens in an asynchronous function.
  
  
• Callbacks, unlike events, distort the flow of control of your program and this makes error handling in particular more difficult.
   
• When using asynchronous functions closure is your friend. It keeps variable that were in scope when the function was created available to it and this provides a continuity of execution environment that makes it easier to continue the flow of control across the use of the callback.
  
  
• jQuery provides the callback object to manage lists of callbacks. This is mostly used in jQuery's reimplementation of the event system but you can make use of it within your own objects to maintain callback lists.
  
  
• jQuery's function queue gives you a way to ensure that asynchronous calls occur in a specified order. 
  
  
• You can use closure to pass parameters to function in the queue. 
  
  
• Custom asynchronous functions can be created using setTimeout and these can be used, with the help of a state object to, break up a task and release the UI thread to keep the UI responsive. 

 

Just jQuery
Events, Async & AJAX

Is now available as a print book: Amazon 

 

Contents

1. Events, Async & Ajax (Book Only)
2. Reinventing Events
3. Working With Events
4. Asynchronous Code
5. Consuming Promises
6. Using Promises 
7. WebWorkers
8. Ajax the Basics - get
9. Ajax the Basics -  post
10. Ajax - Advanced Ajax To The Server
11. Ajax - Advanced Ajax To The Client
12. Ajax - Advanced Ajax Transports And JSONP
13. Ajax - Advanced Ajax The jsXHR Object
14. Ajax - Advanced Ajax Character Coding And Encoding 

Also Available:

buy from Amazon

 

Advanced Attributes

 

JavaScript Canvas - Fetch API Working with lower-level data is very much part of graphics. This extract from Ian Elliot's book on JavaScript Graphics looks at how to use typed arrays to access graphic data. + Full Story

JavaScript Jems - The Inheritance Tax JavaScript should not be judged as if it was a poor version of the other popular languages - it isn't a Java or a C++ clone. It does things its own way.  In particular, it doesn't do inheritance  [ ... ] + Full Story

Other Articles JavaScript Jems - Objects Are Anonymous Singletons JavaScript Canvas - Typed Arrays JavaScript Jems - Functions Are Objects Just jQuery The Core UI - Data JavaScript Jems - Lambda Expressions Just jQuery The Core UI - Easy Plugins JavaScript Async - Basic Worker Just jQuery The Core UI - Animation

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on Twitter, Facebook or Linkedin.

 

Comments

Make a Comment or View Existing Comments Using Disqus

or email your comment to: comments@i-programmer.info