Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JavaScript Function Queue

I have a ton of functions that need to run in succession, but not before the other has completed. What I need is a way to queue these functions to run only after the previous function was successfully completed. Any Ideas?

Function1();
Function2();
Function3();
Function4();
Function5();
like image 957
user610728 Avatar asked Feb 10 '11 02:02

user610728


People also ask

How are JavaScript functions executed?

The Execution Context contains the code that's currently running, and everything that aids in its execution. During the Execution Context run-time, the specific code gets parsed by a parser, the variables and functions are stored in memory, executable byte-code gets generated, and the code gets executed.

Is there queue in JavaScript?

Javascript Queue is one of the linear data structures used to store data in the memory. The queue is a linear data structure that stores data sequentially based on the First In First Out (FIFO) manner and is also known as the First Come First Served data structure. The queue has two ends, namely- rear and front.

What is function () JavaScript?

A function in JavaScript is similar to a procedure—a set of statements that performs a task or calculates a value, but for a procedure to qualify as a function, it should take some input and return an output where there is some obvious relationship between the input and the output.


1 Answers

You could use something like this:

var FunctionQueue = (function(){
    var queue = [];
    var add = function(fnc){
        queue.push(fnc);
    };
    var goNext = function(){
        var fnc = queue.shift();
        fnc();
    };
    return {
        add:add,
        goNext:goNext
    };
}());

and use it like this:

var fnc1 = function(){
    window.setTimeout(function(){
        alert("1 done");
        FunctionQueue.goNext();
    }, 1000);
};

var fnc2 = function(){
    window.setTimeout(function(){
        alert("2 done");
        FunctionQueue.goNext();
    }, 5000);
};

var fnc3 = function(){
    window.setTimeout(function(){
        alert("3 done");
        FunctionQueue.goNext();
    }, 2000);
};

FunctionQueue.add(fnc1);
FunctionQueue.add(fnc2);
FunctionQueue.add(fnc3);
FunctionQueue.goNext();

Edit after a few years: Another way people are approaching this is to pass in a next function that you can call to continue the chain. Like so:

var Queue = function(arr){
    var index = 0;
    var next = function(){
        if (index >= arr.length) {return;}
        arr[index++](next);
    };
    return next;
};

var fn1 = function(next){
    console.log("I am FN1");
    next();
};

var fn2 = function(next){
    console.log("I am FN2");
    setTimeout(next,1000);
};

var fn3 = function(next){
    console.log("I am FN3");
    setTimeout(next,3000);
};

var fn4 = function(next){
    console.log("I am FN4");
    setTimeout(next,1000);
};

Queue([fn1, fn2, fn3, fn4])();
like image 92
david Avatar answered Oct 13 '22 19:10

david