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

 

 

 

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   Amazon.com
Canada          Amazon.ca
UK              Amazon.co.uk
France          Amazon.fr
Germany         Amazon.de
Spain           Amazon.es
Italy           Amazon.it

 

 

 

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 

 

Banner


Getting Started With jQuery - Advanced Ajax Characters & Encoding

One of the biggest problems you encounter in using Ajax is the dreaded character encoding. No matter what data format you select, the data is actually transmitted as text. But it isn't as simple as th [ ... ]



Speed dating - The Art of the JavaScript Date Object

JavaScript's way of working with dates is simple but perhaps this is part of the problem. The Date object is so simple that it can be difficult to work out how to do things like date arithmetic. Find  [ ... ]


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.