JSFiddle - React, Tailwind, and code Playground

by Sam Fereday

HTML

<button id="start">Do The Queue</button>
<div id="output"></div>

JavaScript

var TimedFunctions = function(){
    
    var queue = [], iter = 0, self = this;
    
    this.enqueue = function(q, a, t) {
        queue.push({fn:q,args:a,time:t});
    }
    
    this.runMethod = function() {
        if(typeof queue[iter].fn === 'function') {
            queue[iter].fn.call(self, queue[iter].args);            
        }
        iter += 1;
        self.runQueue();
    }
    
    this.runQueue = function() {
        if(iter > queue.length || !queue[iter]) {
            queue.splice(0,queue.length);
            return;
        }        
        if(!queue[iter].time || queue[iter].time === 0) {
            self.runMethod();
        } else {
            setTimeout(self.runMethod, queue[iter].time || 0);
        }
    } 
    
}

var q = new TimedFunctions();

// Test method to run in queue
function test(name) {
    this.name = name;
    console.log(this.name);
    document.getElementById('output').innerHTML += this.name + "<br />";
}

// Queue some methods
q.enqueue(test, "fun1", 500);
q.enqueue(test, "fun2", 1000);
q.enqueue(test, "fun3", 2000);
q.enqueue(test, "fun4");
q.enqueue(test, "fun5");
q.enqueue(test, "fun6", 3000);

// Run queued
document.getElementById('start').onclick = function(){
    q.runQueue();
};