Execute queue function in javascript

Question

I am trying to create a function queue with multiple functions. After creating, I want to execute every function in it. But there are pending instructions inside these functions, so I want to wait for each of the functions to complete its execution before continuing.

My attempts:

var funqueue = []; funqueue.push( function() {fun1() }); funqueue.push( function() {fun2() }); funqueue.push( function() {fun3() }); executeFunctionQueue(funqueue); 

If the execution function:

 function executeFunctionQueue(funqueue){ var fun1=funqueue.pop; $.when(fun1()).then(executeFunctionQueue(funqueue)); } 

But that does not work. How can I do it?

Answer 1

Try using .queue() , .promise() ; see also Changing animation easing features in jQuery queue

 function fun1() { return $.Deferred(function(dfd) { setTimeout(function() { dfd.resolve(1) }, 1500) }).promise().then(msg) } function fun2() { return $.Deferred(function(dfd) { setTimeout(function() { dfd.resolve(2) }, 1500) }).promise().then(msg) } function fun3() { return $.Deferred(function(dfd) { setTimeout(function() { dfd.resolve(3) }, 1500) }).promise().then(msg) } var funqueue = []; funqueue.push(function() { return fun1() }); funqueue.push(function() { return fun2() }); funqueue.push(function() { return fun3() }); function msg(data) { if (data === "complete") console.log(data) else $("body").append(data + "<br>") } function executeFunctionQueue(funqueue) { var deferred = funqueue.pop(); return deferred().then(function() { // set `this` within `$.queue()` , `.then()` to empty object `{}`, // or other object return $({}).queue("fun", $.map(funqueue, function(fn) { return function(next) { // return `next` function in `"fun"` queue return fn().then(next) } })).dequeue("fun").promise("fun") .then(function() { // return "complete" string when `fun` queue empty return "complete" }) }); } executeFunctionQueue(funqueue) .then(msg); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> 

---

Alternatively, using $.when()

 function executeFunctionQueue(funqueue) { return $.when(!!funqueue[funqueue.length - 1] ? funqueue.pop().call().then(function() { return executeFunctionQueue(funqueue)}) : "complete") } executeFunctionQueue(funqueue) .then(function(complete) { console.log(complete) }); 

 function fun1() { return $.Deferred(function(dfd) { setTimeout(function() { dfd.resolve(1) }, 1500) }).promise().then(msg) } function fun2() { return $.Deferred(function(dfd) { setTimeout(function() { dfd.resolve(2) }, 1500) }).promise().then(msg) } function fun3() { return $.Deferred(function(dfd) { setTimeout(function() { dfd.resolve(3) }, 1500) }).promise().then(msg) } var funqueue = []; funqueue.push(function() { return fun1() }); funqueue.push(function() { return fun2() }); funqueue.push(function() { return fun3() }); function msg(data) { if (data === "complete") console.log(data) else $("body").append(data + "<br>") } function executeFunctionQueue(funqueue) { return $.when(!!funqueue[funqueue.length - 1] ? funqueue.pop().call().then(function() { return executeFunctionQueue(funqueue)}) : "complete") } executeFunctionQueue(funqueue) .then(msg); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> 

Answer 2

If you have functions that return Promise s, this can be done very simply with a function like sequence :

 // sequence :: [(undefined -> Promise<undefined>)] -> Promise<undefined> function sequence(fns) { var fn = fns.shift(); return fn ? fn().then(sequence.bind(null, fns)) : Promise.resolve(undefined); } 

sequence assumes that your asynchronous / Promise requiring functions do not accept any inputs or produce any outputs (they are simply called for side effects.)

An example of using the sequence function:

 sequence([f1, f2, f3]); function f1() { return new Promise(function (res) { setTimeout(function () { console.log('f1'); res(); }, 100); }); } function f2() { return new Promise(function (res) { setTimeout(function () { console.log('f2'); res(); }, 1100); }); } function f3() { return new Promise(function (res) { setTimeout(function () { console.log('f3'); res(); }, 10); }); } 

This will lead to the exit from the mode "f1", "f2" and "f3" depending on the changing set time delays between them.

Answer 3

use the deferred / promise template to perform functions to perform other functions.

 var createQueue = function () { var d = $.Deferred(), p = d.promise(), triggerQueue = function () { d.resolve(); }; return { addToQueue: p.then, triggerQueue: triggerQueue } }; var cq = createQueue(); cq.addToQueue(function () { console.log("hi"); }).then(function () { console.log("hello"); }); cq.triggerQueue(); 

Answer 4

Use this

 function executeFunctionQueue(funqueue){ if(!funqueue.length){ return } var fun1=funqueue.pop(); $.when(fun1()).then(function(){ executeFunctionQueue(funqueue) }); } 

Or even this if the functions in the queue are not asynchronous.

 function executeFunctionQueue(funqueue){ var fun=funqueue.pop(); fun() if(!funqueue.length){ return } executeFunctionQueue(funqueue); } 

Answer 5

• First create an array of the given functions:

 var array_of_functions = [function1, function2, function3, function4]; 

2. If you want to execute a given function in an array, try the following:

 array_of_functions[index]('mystring'); 

Answer 6

To make a clean queue, your asynchronous functions will need to somehow indicate when they will be executed, or the next function will not know where to start. This means that you cannot pass any old function; they will have to follow some format. I would suggest using the done callback as the first parameter in your function calls. This way you can support both synchronous and asynchronous functions.

 var processQueue = function nextStep(queue) { var next = queue.shift(); next && next(function() { nextStep(queue); }); } function fun1(done) { setTimeout(function() { console.info('1'); done(); }, 1000); } function fun2(done) { console.info('2'); done(); } processQueue([fun1, fun2]); // >> 1 second wait // >> 1 // >> 2