How Javascript functions run

Question

I am wondering how javascript functions load or run.

Take for example i have got these block of javascripts functions;

<span id=indicator></span>

function BlockOne(){
    var textToWrite = document.createTextNode("I am   ");
    document.getElementById("indicator").appendChild(textToWrite);
} 
//==========
function BlockTwo(){
    var textToWrite = document.createTextNode("Going   ");
    document.getElementById("indicator").appendChild(textToWrite);
} 
//=========
function BlockThree(){
    var textToWrite = document.createTextNode("To School   ");
    document.getElementById("indicator").appendChild(textToWrite);
} 

function RunAll(){
    BlockOne();
    BlockTwo();
    BlockThree();
}
window.onload=RunAll();

Please which of these block of function run first or in what order are they going to run.

In the first example BlockThree will run but none of the others — soktinpk
– soktinpk, Commented Mar 13, 2015 at 23:24
Pretty sure they run sequentially, and you forgot to add () to the end of each function. — m0meni
– m0meni, Commented Mar 13, 2015 at 23:24
window.onload=BlockOne=BlockTwo=BlockThree; <-- does not do what you think it does. — epascarello
– epascarello, Commented Mar 13, 2015 at 23:34
You should consider using window.addEventListener("load", yourFunction, false) instead of window.onload = yourFunction unless you need to support old browsers. — Keilaron
– Keilaron, Commented Mar 13, 2015 at 23:34
@epascarello so what about if we have a declaration of variables say var d=a=c=e=" "; — Simlofi
– Simlofi, Commented Mar 13, 2015 at 23:48

Pointy · Accepted Answer · 2015-03-13 23:30:36Z

6

This:

window.onload=BlockOne=BlockTwo=BlockThree;

will result in only "BlockThree" running when the "load" event fires. The way that assignment statement is interpreted is as if it were written:

window.onload = (BlockOne = (BlockTwo = BlockThree));

The right-most = operator causes the symbol "BlockTwo" to be set to the same value as "BlockThree", and then the middle = assigns that value (still "BlockThree") to "BlockOne". Function definition statements bind the function name to a local symbol, but they're not special symbols; they're pretty much the same as ordinary var symbols.

When that's all done, the "onload" property of window is set to just one function reference, and that's "BlockThree". After that point the original functions associated with "BlockOne" and "BlockTwo" will no longer be referenceable; they're essentially gone.

The second will run none of them, because your "RunAll" function is missing the function call operator ( () ) for all three of the functions. If it were

function RunAll(){
  BlockOne();BlockTwo();BlockThree();
}

then all three would run, in the order listed left-to-right.

edited Mar 13, 2015 at 23:30

answered Mar 13, 2015 at 23:25

Pointy

415k62 gold badges600 silver badges632 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

soktinpk Over a year ago

You should explain that in the first example, you are assigning window.onload = BlockThree; BlockOne = BlockThree; BlockTwo = BlockThree

Pointy Over a year ago

@soktinpk working on it - I was just having a sneezing fit :)

Simlofi Over a year ago

@Pointy so they run from up to down or from bottom to up

Pointy Over a year ago

@Simlofi the order in which the functions are declared does not matter at all. What matters is the order in which the functions are called.

Simlofi Over a year ago

@Pointy still you have not answered my question but I appreciate your answer what i am asking is for any reason which one trigger first

|

Collectives™ on Stack Overflow

How Javascript functions run

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related