jQuery 3 - Function Queues
jQuery 3 - Function Queues
Written by Ian Elliot   
Monday, 30 January 2017
Article Index
jQuery 3 - Function Queues
The Async Problem
Chained Auto Queuing

Chained Auto Queuing

Manually queuing and dequeuing isn't difficult but it is a bit messy. Using the jQuery idiom of function chaining we can hide the details and still make everything work. This is how the animation functions and the default fx queue work. 

What we have to do to convert the three functions so that they automatically use a function queue is change them so that they add the asynchronous part to the queue and remember to call next to move the queue on. This part is fairly easy. The difficult part is that we need an extra dequeue command to get things moving. It is difficult because you only want to do this when the first function is added to the queue. After that you can rely on the functions themselves to call next to move the queue on. Of course if the functions all finish then the queue becomes empty and the next time a function is added you once again need the extra dequeue command. 

The default queue keeps track of when the queue is active by placing a string at the start of the queue to act as a signal. We can't make us of this exact method for a general queue without modifying the inner workings of jQuery. Instead we can add a null function to the end of the queue to act as a state indicator. The idea is what when you are adding a function to an empty queue you know that it isn't active - i.e. there are no functions still active that might call next to move the queue on. This works as long as you follow the rule that every function you put on the queue calls next. If you put n functions on the queue then you need an explicit dequeue for the first but the subsequent functions are all dequeued by the previous function calling next. The final function will dequeue the null function leaving the queue empty and this is the signal that the queue is inactive.

The first thing we have to do is test to see if the queue is active. To do this we simply pop the last item off the queue. If the queue is empty then there is no last item and state is undefined. If the queue is active then there is a null function at the end and it needs to be removed to add the new function:

myF1: function () {
 var state = this.queue("myQ").pop();

With the null function removed we can add the function we actually want to place on the queue:

 this.queue("myQ", function (next) {
      setTimeout(function () {
        console.log("myF1");
        next();
      }, 3000); });

This is just the usual print a message to the console function complete with a call to next to move the queue on. 

Now we have to add the null function to the end of the queue:

this.queue("myQ", function () {});

This marks the queue as active but if it was inactive when we started adding a function to it we need to dequeue the function to get things going:

if (state === undefined)  this.dequeue("myQ");

Finally we return this so that the functions can be chained:

 return this;
}

 

Making the same modification each of the other functions means we can now call them using:

$({}).myF1().myF2().myF3();

and you will see myF1 printed in the log after 3 seconds followed by myF2 and myF3 after a further 2 and 1 seconds respectively. That is, the chaining automatically implements the queue to keep the asynchronous functions in the correct order. 

This might seem complicated but the only complication is due to the need to get the queue started with an extra dequeue operations. If you want to keep things simple you could manually include a dequeue.

The complete listing is:

$.fn.extend({
 myF1: function () {
        var state = this.queue("myQ").pop();
        this.queue("myQ", function (next) {
            setTimeout(function () {
              console.log("myF1");
              next();
            }, 3000);
        });
        this.queue("myQ", function () {});
        if (state === undefined) {
            this.dequeue("myQ");
        }
        return this;
      },

 myF2: function () {
        var state = this.queue("myQ").pop();
        this.queue("myQ", function (next) {
            setTimeout(function () {
              console.log("myF2");
              next();
            }, 2000);
        });
        this.queue("myQ", function () {});
        if (state === undefined) {
            this.dequeue("myQ");
        }
        return this;
      },

 myF3: function () {
        var state = this.queue("myQ").pop();
        this.queue("myQ", function (next) {
            setTimeout(function () {
              console.log("myF3");
              next();
            }, 1000);
        });
        this.queue("myQ", function () {});
        if (state === undefined) {
            this.dequeue("myQ");
        }
        return this;
      },
});


$({}).myF1().myF2().myF3();

 

Queues or Promises

Function queues are a simple and direct way of implementing correctly chained asynchronous functions. Promises are more sophisticated but you can do the same job using the then method in a similar way to next.

The big advantage of a Promise is that it can more easily handle errors. Any failure in the chain of functions propagates and can be picked up by a single function designed to deal with the problem. 

Function queues don't have the same sophistication when it comes to errors but in many cases they don't need to. If each function in the queue checks for its own error conditions that often all that is required to handle an error is to clear the queue so that the following functions don't execute.

If this isn't a suitable error handling strategy then you will either have to implement something different or move to using Promises, a topic which is covered in the forthcoming Asynchronous Programming & Ajax with jQuery 3.

For the moment function queues are here to stay and even if you don't use them for your own custom queues you will encounter them as part of any animation functions you might use - and these are described in the next chapter. 

 

justjquery

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. Events In jQuery (coming soon)
  2. Working With Events
  3. Asynchronous Code
  4. Promises & Deferred
  5. Using Promises
  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

 

Banner


Getting Started with jQuery UI

jQuery UI is built to work with jQuery. If you are  already using jQuery, it is recommended as an addin to make your pages look like more than just HTML. Let's see how easy it is to get started w [ ... ]



jQuery 3 - Animation

jQuery's animation functions are built on the use of the default function queue. They are easy to use, but can sometimes be confusing because of the way they mix different ways of showing and hiding e [ ... ]


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

Banner


Getting Started with jQuery UI

jQuery UI is built to work with jQuery. If you are  already using jQuery, it is recommended as an addin to make your pages look like more than just HTML. Let's see how easy it is to get started w [ ... ]



jQuery 3 - Animation

jQuery's animation functions are built on the use of the default function queue. They are easy to use, but can sometimes be confusing because of the way they mix different ways of showing and hiding e [ ... ]


Other Articles

 



Last Updated ( Monday, 30 January 2017 )
 
 

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