JavaScript: Sequencing Functions

So, I was wondering how to properly queue some methods and/or functions like jQuery did? (in just JavaScript, without library).
Anyway, I always use that kind of implementation on a page with multiple visual effects with jQuery. And magnificently, if I did it "correctly", they (the methods and/or functions) would have no conflict.

Let's say we have four different JavaScript functions to be sequenced.

I made a basic content injection (via innerHTML method), and it's wrapped within a function.
Then it is repeated four times, with different function name and different content injection.

I also made 2 different demos.

1. The first one is with setInterval, like, delay in jQuery.
2. Then the second is without that, right-away-implementation (with additional setTimeout — so we can see the transition).

---

This is the demo

---

First of all, this is the (CSS) styling and the elements stacking <!--CSS--> <STYLE> /*element class which is going to be injected something*/ .middle { height: 48px; line-height: 48px; } .middle, h1 { text-align: center; } /*button*/ .butt { padding: 5px 20px; border-radius: 10px; margin: auto; } .middle, .butt, h1 { font-family:consolas,courier,monospace; } .middle, .butt { font-size:32px; } /*custom horizontal line*/ hr { border: 0; border-top: 1px solid #ccc; border-bottom: 1px solid #fff; height: 1px; } /*responsive wannabe*/ @media (max-width: 360px) { .middle, .butt { font-size: 12px; } } </STYLE> <!--ELEMENTS #1--> <h1>With <code>setInterval</code></h1> <div id="holder" class="middle"></div> <div style="text-align:center;margin-top:10px;"> <button type="button" class="butt" onclick="init(this)" id="button">Click to start</button> </div> <hr> <!--ELEMENTS #2--> <h1>Right away</h1> <div id="holder2" class="middle"></div> <div style="text-align:center;margin-top:10px;"> <button type="button" class="butt" onclick="init2(this)" id="button2">Click to start</button> </div>

Then, the script

The 4 functions being sequenced
I put two parameters on each function, the a and i function one(a, i) { a.innerHTML += "f#" + i; } function two(a, i) { a.innerHTML += " - f#" + i; } function three(a, i) { a.innerHTML += " - f#" + i; } function four(a, i) { a.innerHTML += " - f#" + i; }

• The a is the DOM element. The element where we inject the content.
• The i is the counter. It will show which function is being executed.

Now, the button behavior functions
I disable and enable the two buttons every time each is clicked.
The functions look like this. Each of these has one parameter. function disabled(a) { a.disabled = true; //Boolean 1 a.innerHTML = "button disabled"; } function enabled(a) { a.disabled = false; //Boolean 0 a.innerHTML = "restart"; }

The a parameter there is the passed button element itself.
FYI, the received value (the argument) will be different with the a in the 4 functions above.
These functions are triggered by the button element, and the value of the a parameter is the DOM element of the button.

As you can see below:

<!--This is the element-->
<button onclick="the_function(this)" other_attribute="..."> ... </button>

<!--/////////////////////////////////////////
    Explanation
    1. The onclick is the inline event trigger of the function
    2. The the_function is the name of the function being triggered
    3. The this is the passed argument (the actual value) of the function
///////////////////////////////////////////////-->

<!--This is the script-->
<script>

  function the_function(parameter) {
    /*\
    |*| the parameter in the parenthesis is the parameter of the function.
    |*| It can be named whatever you like
    |*| as long as you put consistent naming inside the function.
    |*| Remember to use other than "this" keyword.
    \*/
  }

</script>

Let's go to 1^st button click function
I named the function as init, with a parameter b.
You can see how I sequenced the 4 functions above, by declaring them in an array then call each of them sequentially with setInterval.
Also, you can look at the button functions calling (the callbacks) in this.

Actually, every function invocation in this is a callback. But, the 5 functions (+button enabling) is delayed with some time interval. The first button disabling function is a right-away-execution.
function init(b) { var h = document.getElementById("holder"), //the 1st element to be injected i = -1, //initial counter value funcs = [one, two, three, four], //functions to be sequenced timer; //setInterval timer variable disabled(b); //disable the button after click //wipe the content of the element, if there's something in it if(h.innerHTML.length > 0) { h.innerHTML = ""; } //run interval timer - 500ms of duration timer = setInterval(function () { i += 1; //increase counter by one //conditions if(i < (funcs.length)) { funcs[i](h, i + 1); //the h is the element and the i+1 is the function number (starts from 1) } else { enabled(b); //enable button after the sequence has finished clearInterval(timer); //clear timer } }, 500); }

The b value is the button element (passed from this), from the inline trigger onclick. You can see the trigger on the first part above. I put it on each button, the inline trigger.

Now, the 2^nd button click function
I named the function as init2, with a parameter b.
This is "simpler", sort of speak. I sequenced the 4 functions also by declaring them in an array then call each of them sequentially with for loop, no visible delay every time a function is being executed.
But the sequence order is the same as the first button output.

I put setTimeout — one time delay, therefore we can observe the output.
Without it, it would be just "static". Nothing's different every time we trigger the 2^nd function.
function init2(b) { var h = document.getElementById("holder2"), //the 2nd element to be injected i = 0, //initial counter value funcs = [one, two, three, four], //functions to be sequenced dur; //for timeout duration (so we can see the thing) disabled(b); //disable the button after click //conditions if(h.innerHTML.length > 0) { h.innerHTML = ""; //empty the element if there's something in it dur = 500; //set timeout duration to 500ms } else { dur = 0; //set timeout duration to 0 (right away), just for first click } //the sequencing function function sequence() { for(i; i < funcs.length; i++) { funcs[i](h, i + 1); } enabled(b); //enable button after the sequence has finished } //run the sequencing function with timeout setTimeout(sequence, dur); }

The b is also the passed button element (using this), from the inline trigger onclick.

What's with the a and b parameter?
Why not use all the same one letter/keyword?

Well, I dunno, I was just doodling thing. You can put consistent parameter letter/keyword for your own functions then.

hehe

---

That's about it. A demo.
There are plenty of ways to chain functions in JavaScript. This demo emphasized the use of array of functions.

---

THOR

You can go to a separate page for this demo right over there — and observe the page source, especially the script part.

I made another example, for sequencing CSS properties, using setInterval, at another page.

Note:
This is a basic doodle (for you who's very interested in this).

You may want to enhance that by adding the actual addEventListener for each of the completion of DOM manipulation, and/or including setTimeout (+other timing methods) in each function.

Or, if the script isn't dealing with the DOM element, we can "just" implement the callback, for chaining one function to another.

---

Useful Links

1. Detecting the end of (CSS3) transition across browsers using JavaScript at Stack Overflow
2. Normalizing the transitionend event across browsers a-la Modernizr, right there
3. Basic implementation of callback function in pure JavaScript and with jQuery library
4. JavaScript function basic at W3Schools
5. JavaScript function arguments at JavaScript Tutorial