Summary of JavaScript program execution order issues_javascript skills

The order may be a bit messy, so I’ll sort it out if I write too much. Some terminology may be inappropriate, so criticism and corrections are welcome. The sample programs used below have been verified by me and are compatible with all major browsers. OK, let’s get to the point.
1. Declaration and reference of variables
Variables must be declared first and then referenced. Everyone knows this, but it still needs to be said, because a related issue will be discussed later.

[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute

]
2. Function Declarations and calls

JavaScript is a descriptive scripting language that is dynamically parsed and executed by the browser. There are generally two ways to define functions. Browsers have different parsing orders for different ways.

Copy code

The code is as follows:

//"definition" function definition
function Fn1(){
alert("Hello World!");
}
//"Assignment" function definition
var Fn2 = function(){
alert("Hello wild! ");
}

During the page loading process, the browser will scan every js code block (or file) on the page or loaded. If it encounters a defined function, Then perform preprocessing (similar to compilation of C, etc.), and then start execution from top to bottom after the processing is completed; when encountering an assignment function, the function is only assigned to a variable without preprocessing (similar to the variable in 1) (Principle of reference after definition), it will not be processed until it is called. Here is a simple example:

Copy code

The code is as follows:

//"definition "Function definition
Fn1();
function Fn1(){
alert("Hello World!");
}

Execute normally, and "Hello World" will pop up !", the browser preprocesses Fn1 and then starts execution from Fn1();.

Copy code

The code is as follows:

//"Assignment" function definition
Fn2 ();
var Fn2 = function(){
alert("Hello wild!");
}

Firebug error: Fn2 is not a function, the browser does not Preprocess Fn2 and execute it in sequence, so the error Fn2 is undefined.
3. Processing of code blocks and js files
"Code block" refers to a pair of tags wrapped js code, file means file, nonsense :D
The browser scans each block or file independently, and then executes the global code sequentially (mentioned in 2). Therefore, in one block (file), the function can be "defined" after the call; but in two blocks, the block in which the function is defined must be before the block in which the function is called.
It’s confusing, just look at the example:

Copy the code

The code is as follows:

// Error: Fn is undefined, just swap the two blocks

4. Repeated definition of a function will overwrite the previous definition

This is the same as repeated definition of a variable, code:

Copy code

The code is as follows:

function fn(){
alert(1);
}
function fn(){
alert (2);
}
fn();
// Popup: "2"

What if this is the case:

Copy code

The code is as follows:

fn();
function fn(){
alert(1);
}
function fn(){
alert(2);
}
// Still pops up: "2"

<script> alert(myStr); // 弹出"undefined"; var myStr = "Hello World!"; alert(myStr); // 弹出"Hello World"; </script>
"2" still pops up, why? 2 has been explained...
5. Execution of the body’s onload function and the body’s internal functions
The internal functions of the body will be executed before the onload function. Test code:

Copy code The code is as follows:

//html head...



< ;/body>
//First pops up "I am inside the Wall..";
//Then pops up "I am outside the Wall!"

The onload event of body is triggered The condition is that the body content is loaded, and the js code in the body will run before this event is triggered (why? 6 tells you...)
6. Is JavaScript multi-threaded or single-threaded?
Strictly speaking, JavaScript does not have the concept of multi-threading. All programs are executed "single-threaded" in sequence.
Give an inappropriate example:

Copy code The code is as follows:

function fn1(){
var sum = 0;
for(var ind=0; indsum = ind;
}
alert("The answer is" sum ; 🎜>//First it pops up: "The answer is 499500",
//Then it pops up: "I knew it earlier, but I just didn't say it"


Then you must ask: What about delayed execution? ,Ajax asynchronous loading, isn't it multi-threaded? Yes, a program like the following does look "multi-threaded":




Copy code

The code is as follows:

function fn1(){ setTimeout(function(){ alert("I call first") },1000); }

function fn2(){

alert("I will call later");
}
fn1();
fn2();
// Pop up first: "I will call later",
// 1 second Then it pops up: "I call first"


It seems that fn2() and the delay program are separated into two processes, but in fact, this is the "callback" mechanism in JavaScript at work. , similar to the "interrupt and response" in the operating system - the delay program sets an "interrupt", then executes fn2(), waits for 1000 milliseconds to expire, and then calls back to execute fn1().
Similarly, the function called by the body's onload event in 5 also uses the callback mechanism - after the body is loaded, the callback executes the fnOnLoad() function.
The same is true for data processing functions in Ajax requests.
For a more in-depth discussion of JavaScript thread issues, see this article My opinion on threads in JavaScript and the introduction to JavaScript multi-threaded programming on infoQ.
I’m tired, let’s talk about the callback function again.

7. Callback function

What is the callback function used for? It’s just a function executed by callback, nonsense :D
As mentioned in 6, the most common callbacks are the calling functions of browser events such as onclick, onmouseover, onmousedown, onload, etc.; and the processing functions of Ajax asynchronous request data; SetTimeOut delayed execution, setInterval loop execution function, etc.
Let’s just write a pure callback function to play:


Copy the code


The code is as follows:

function onBack(num){ alert("Shanshan I'm late"); //Execute num slaps} function dating(hours, callBack){

var SP= 0; // SP, anger value

//The female pig’s feet stood in the snow for hours
//The cycle begins..
SP;
//The cycle ends...
callBack(SP);
}
dating(1, onBack);


Execute the callback function onBack after dating is finished - the date is over and the storm has begun.
That’s it for today. Some more in-depth things still need to be sorted out, and more things still need to be learned. Corrections and additions are welcome, and suggestions are welcome.