Detailed explanation of js program execution and sequence implementation_javascript skills

Declaration and calling of functions
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.
The code is as follows:

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 each js code block (or file) on the page or loaded. If When encountering a definition function, preprocessing is performed (similar to compilation of C, etc.), and after the processing is completed, execution starts from top to bottom; when encountering an assignment function, the function is just assigned to a variable without preprocessing ( Similar to the principle in 1 that variables must be defined first and then referenced), they will not be processed until they are called. Here is a simple example:
The code is as follows:

Copy the code The code is as follows:

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

Normal Execute, "Hello World!" pops up, the browser preprocesses Fn1, and then starts execution from Fn1();.
The code is as follows:

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 executes it sequentially, so the error Fn2 is not defined.

3. Processing of code blocks and js files
“Code block” refers to a pair of The js code wrapped in the tag refers to the 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:
The code is as follows:

Copy the code The code is as follows:

// Error: Fn is notdefined, 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, the code:
The code is as follows:

Copy code The code is as follows:

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

What if this is the case :
The code is as follows:

Copy code The code is as follows:

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

"2" still pops up, why? 2 has been explained...

5. Execution of body’s onload function and body’s internal functions
The internal functions of body will be executed before the onload function, test code:
The code is as follows:

Copy the code The code is as follows:

//html head...




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

The triggering condition for the onload event of the body 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 sequentially in a "single thread".
An inappropriate example:
The code is as follows:

Copy the code The code is as follows:

function fn1(){
var sum = 0;
for(var ind=0; ind<1000; ind ) {
sum = ind;
}
alert ("The answer is" sum);
}
function fn2(){
alert("I knew it earlier, but I just didn’t say it");
}
fn1();
fn2();

//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: aren't delayed execution and Ajax asynchronous loading multi-threaded? Yes, a program like the following does look "multi-threaded":
The code is as follows:

Copy the 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",
// A pop-up will appear after 1 second: "I call first"

It seems that fn2() and the delay program are separated into two processes, but in fact, this is " The "callback" mechanism is 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, 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 on 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, what nonsense :D
As mentioned in 6, the most common callbacks are the calling functions of browser events such as onclick, onmouseotutorialver, onmousedown, onload, etc.; and the processing of Ajax asynchronous request data. Function; setTimeOut delayed execution, setInterval loop execution function, etc.
Let’s just write a pure callback function to play with:
The code is as follows:

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 starts..
SP;
/ /End of loop...
callBack(SP);
}
dating(1, onBack);