Asynchronous Code In JavaScript
Asynchronous Code In JavaScript
Written by Ian Elliot   
Monday, 15 May 2017
Article Index
Asynchronous Code In JavaScript
Asynchronous Flow Of Control and Closure
Custom Asynchronous Functions

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. 


  • 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. 



Now Available as a Print Book: 



You can buy it from:

USA and World



The Core UI

  1. Understanding jQuery (Book Only)
  2. The DOM And Selectors
  3. CSS Selectors
  4. The jQuery Object (Book Only)
  5. Filters
  6. Advanced Filters - Traversing The DOM
  7. Modifying DOM Objects
  8. Creating And Modifying The DOM
  9. jQuery Data
  10. Forms
  11. Function Queues
  12. Animation
  13. jQuery UI
  14. jQuery UI Custom Control - Widget Factory
  15. jQuery - Easy Plugins
  16. Getting Started With QUnit Testing

Now Available as a Print Book:


jquery2coverYou can buy it from:

USA and World




Events, Async & AJAX

  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 



Just JavaScript - The Function Object

The function object is the most important object in all of JavaScript and yet we tend to forget that it is an object. Understanding that JavaScript functions are objects is probably the most important [ ... ]

Just JavaScript - Functions Scope, Lifetime and Closure

When you first meet it closure seems like the craziest of ideas. However once you realize that JavaScript functions are objects and what this implies then it seems like a natural consequence.

Other Articles

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, FacebookGoogle+ or Linkedin.





or email your comment to:

Last Updated ( Tuesday, 16 May 2017 )

Copyright © 2018 All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.