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
Summary

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. 

 

 

Now Available as a Print Book: 

 

smallcoverjQuery

You can buy it from:

USA and World        Amazon.com
Canada               Amazon.ca
UK                   Amazon.co.uk
France               Amazon.fr
Germany              Amazon.de
Spain                Amazon.es
Italy                Amazon.it

 

I 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

 

The companion volume will be available as a book very soon:

Just jQuery: Events, Async & Ajax

  1. Reinventing Events
  2. Working With Events
  3. Asynchronous Code 
  4. Consuming Promises
  5. Using Promises (coming soon)
  6. WebWorkers

  7. Ajax the Basics - get
  8. Ajax the Basics -  post
  9. Ajax - Advanced Ajax To The Server
  10. Ajax - Advanced Ajax To The Client
  11. Ajax - Advanced Ajax Transports And JSONP
  12. Ajax - Advanced Ajax The jsXHR Object
  13. Ajax - Advanced Ajax Character Coding And Encoding (coming soon)

 

Banner


jQuery 3 - Using Events

jQuery provides both a general framework for handling events and event-specific functions. While you can use the general functions - on, off and one - to deal with all events, the event-specific funct [ ... ]



jQuery UI and Auto-Complete Address Entry

jQuery UI has a little-known feature that makes interactive auto-complete very easy. In this hands-on tutorial we put it together with the cloud-based Global Express Entry address auto-complete servic [ ... ]


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.

 
 

 

blog comments powered by Disqus



Last Updated ( Tuesday, 16 May 2017 )
 
 

   
Banner
Copyright © 2017 i-programmer.info. All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.