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. 



Just jQuery
Events, Async & AJAX

Is now available as a print book: Amazon 



  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



Just jQuery The Core UI - Selectors

Selectors are what jQuery uses to pick out particular objects in the DOM. While this might start out simply enough, it can appear to be complicated in more testing examples. The trick is to always rem [ ... ]

Just jQuery The Core UI - The DOM

From the point of view of a JavaScript programmer, the User Interface (UI) is created by HTML tags in the web page. When HTML was first invented there was no intention for it to be the UI for a progra [ ... ]

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





or email your comment to:

Last Updated ( Thursday, 05 May 2022 )