js is single-threaded;
There are three types of threads in js
1. Page rendering
2. Main code logic
3. Event trigger;
Let's look at a piece of code
<script>
setTimeout(function(){
console.log(123);
},0);
</script>
According to the api of js, the above code should be executed after 0 seconds, but is this really the case?
There is no thread control in js, so the thread cannot sleep; but we can block the thread with alert;
When we add alert later, we see that 123 is not output immediately; instead, it is output after the pop-up window is closed;
In js, when a callback is encountered, the callback will be temporarily suspended, and the callback and other functions will be executed after the execution of the main process is completed;
See the following code
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script> 7 window.onload = function () { 8 var divs = document.getElementsByTagName("div"); var(for9 i = 0; i < divs.length; i++) { 10 var div = divs[i]; 11 12 div.onclick = function () { 13 alert("我是第"+ (i+1) +"个div"); 14 }; 15 16 } 17 } 18 </script> 19 </head> 20 < body > 21 < div > I am the 1st div </ div > 22 < div > I am the 2nd div </ div > 23 < div > I am the 3rd div </ div > 24 < div > I am the 4th div </ div > 25 < div > I am the 5th div </ div > 26 < div > I am the 6th div </ div > 27 <div > I am the 7th div </ div > 28 < div > I am the 8th div </ div > 29 < div > I am the 9th div </ div > 30 < div > I am the 10th div </ div > 31 </ body > 32 </ html >
Many of you should know that the above code will not execute as we intended, but can you explain why?
Now let's analyze;
div.onclick = function () {
alert("I am the first" + (i+1) + "div");
};
The latter method will not be executed immediately, as we all understand, div.onclick points to a method object, which is placed in one place (suspended)
As we said in the previous section, there is no block-level scope in js, so the i defined in for is equal to the definition defined outside for;
window.onload = function () {
var divs = document.getElementsByTagName("div");
var i；
for ( i= 0; i < divs.length; i++) {
var div = divs[i];
div.onclick = function () {
alert("我是第"+ (i+1) +"个div");
};
}
}
From the above, we can see that when the for loop is completed, i is the length of the divs, and when the div click event is triggered, the method will look up the i variable to the upper level, and the i at this time is no longer the i in the loop;
At this time, we can solve the above problems in the form of closures;
window.onload = function () {
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
var div = divs[i];
div.onclick = (function (j){
return function () {
alert("我是第"+ (j+1) +"个div");
};
})(i);
}
}
The principle is to save the i during the loop for later method calls;