Sunday, October 19, 2014

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

Then, the script

The 4 functions being sequenced
I put two parameters on each function, the a and 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.

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>

    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-->

  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.


Let's go to 1st 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.

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 2nd 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 2nd function.

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.


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.


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.

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

No comments:

Post a Comment

Tell me what you think...