Geek Answers Handbook

How do I create a client queue system?

Overview

I am working on a project and I ran into some problem in that things do not happen in the order in which I want them to happen. Therefore, I was thinking of creating some kind of queue that I can use to organize function calls and other various JavaScript / jQuery instructions used during startup, i.e. When loading the page. What I'm looking for does not have to be a queue data structure, but some kind of system that will ensure that actions are performed in that order and only when the previous task is completed can start a new task.

I briefly looked at jQuery Queue and AjaxQueue , but I really don't know how they work, so I'm not sure if this is the approach I want to take ... but I will continue to read more about these tools.

SPECIFIC

I currently set everything up so that some work happens inside $(document).ready(function() {...}); , and other work happens inside $(window).load(function() {...}); . For example,

 <head> <script type="text/javascript"> // I want this to happen 1st $().LoadJavaScript(); // ... do some basic configuration for the stuff that needs to happen later... // I want this to happen 2nd $(document).ready(function() { // ... do some work that depends on the previous work do have been completed var script = document.createElement("script"); // ... do some more work... }); // I want this to happen 3rd $(window).load(function() { // ... do some work that depends on the previous work do have been completed $().InitializeSymbols(); $().InitializeBlock(); // ... other work ... etc... }); </script> </head>

... and it's really tiring and ugly, not to mention poor design. Therefore, instead of dealing with this mess, I want to create a fairly universal system so that I can, for example, enqueue $().LoadJavaScript(); , then var script = document.createElement("script"); , then $().InitializeSymbols(); , then $().InitializeBlock(); etc .... and then Queue will execute function calls and instructions, so that after completing one command the other can start until the queue is empty, instead of calling dequeue again.

The rationale for this is that some work must be performed, such as configuration and initialization, before other work begins due to the dependence on the configuration and initialization steps taken. If this doesn't seem like a good solution, let me know :)

SOME MAIN WORKS

I wrote the code for the basic queue, which can be found here , but I want to expand its functionality so that I can store various types of "Objects", for example, separate JavaScript / jQuery instructions and function calls, mostly code fragments that I want to execute.

UPDATE

In the current Queue implementation that was implemented, it looks like I can store functions and execute them later, for example:

 // a JS file... $.fn.LoadJavaScript = function() { $.getScript("js/Symbols/Symbol.js"); $.getScript("js/Structures/Structure.js"); }; // another JS file... function init() { // symbols and structures }; // index.html var theQueue = new Queue(); theQueue.enqueue($().LoadJavaScript); theQueue.enqueue(init); var LJS = theQueue.dequeue(); var INIT = theQueue.dequeue(); LJS(); INIT();

I also think I figured out how to store separate instructions like $('#equation').html(""); or perhaps even if-else statements or loops, by transferring them as such:

 theQueue.enqueue(function() { $('#equation').html(""); // other instructions, etc... });

But this approach would require me to wait until the line is completed with his work, before I can continue to do my job. This seems to be the wrong design. Is there a smarter approach to this? Also, how can I find out that a particular function has completed execution so that the Queue can know in order to move on? Is there some kind of return value that I can wait for or a callback function that I can specify for each task in the queue?

WRAP-UP

Since I am doing everything on the client side, and I can not get the Queue to do its own thing independently (according to the answer below), is there a smarter decision than me, just expecting the queue to finish its work

Since this is more a design question than a specific code question, Iā€™m looking for suggestions on how to solve my problem, tips on how I should design this system, but I definitely welcome you and would like to see code to support the suggestions :) I also I welcome any criticism regarding the Queue.js file that I linked to above, and / or my description of my problem and the approach that I plan to take to solve this problem.

Thank you Christo

+7
source share
4 answers

I would suggest using http://headjs.com/ It allows you to download js files in parallel, but to execute them sequentially, in essence, is the same as what you want to do. This is pretty small, and you can always use it for inspiration.

I would also mention that handlers that rely on order of execution are not a good design. I can always put all of my bootstrap code in a ready-made event handler. There are times when you will need to use a load handler if you need access to images, but for me it is not very common.

+2
source

how to save pieces of code in a queue and execute it later

Your current implementation is already working for this. There are no declared types in JavaScript, so your queue can contain anything, including function objects:

 queue.enqueue(myfunc); var f = queue.dequeue(); f();

how can i make a queue on my own

JavaScript is essentially single-threaded, which means that only one can be executed at any given time. Thus, a queue cannot work "independently" from the rest of your code, if that is what you mean.

You basically have two options:

  • Running all the queues in a queue one by one - this does not even require a queue, since it is the same as simply placing function calls directly in your code.

  • Use synchronized events: run one function at a time and after its completion set a timeout to execute the next function in the queue at a certain interval. We give an example of this.

 function run() { var func = this.dequeue(); func(); var self = this; setTimeout(function() { self.run(); }, 1000); }

If func is an asynchronous request, you need to move setTimeout to the callback function.

+1
source

Here is something that might work, is that what you need?

 var q = (function(){ var queue = []; var enqueue = function(fnc){ if(typeof fnc === "function"){ queue.push(fnc); } }; var executeAll = function(){ var someVariable = "Inside the Queue"; while(queue.length>0){ queue.shift()(); } }; return { enqueue:enqueue, executeAll:executeAll }; }()); var someVariable = "Outside!" q.enqueue(function(){alert("hi");}); q.enqueue(function(){alert(someVariable);}); q.enqueue(function(){alert("bye");}); alert("test"); q.executeAll();

alert("test"); executed before what you put in the queue.

+1
source 
 **The main functions** **From there we can define the main elements required:** var q=[];//our queue container var paused=false; // a boolean flag function queue() {} function dequeue() {} function next() {} function flush() {} function clear() {} **you may also want to 'pause' the queue. We will therefore use a boolean flag too. Now let see the implementation, this is going to be very straightforward:** var q = []; var paused = false; function queue() { for(var i=0;i< arguments.length;i++) q.push(arguments[i]); } function dequeue() { if(!empty()) q.pop(); } function next() { if(empty()) return; //check that we have something in the queue paused=false; //if we call the next function, set to false the paused q.shift()(); // the same as var func = q.shift(); func(); } function flush () { paused=false; while(!empty()) next(); //call all stored elements } function empty() { //helper function if(q.length==0) return true; return false; } function clear() { q=[]; } **And here we have our basic queue system! let see how we can use it:** queue(function() { alert(1)},function(){ alert(2)},function(){alert(3)}); next(); // alert 1 dequeue(); // the last function, alerting 3 is removed flush(); // call everything, here alert 2 clear(); // the queue is already empty in that case but anyway...
0
source

More articles:


All Articles