javascript - Non-sequential execution of JS code statements. Single-step operation is normal, but problems arise directly.

Question

1. Want to realize that the pop-up box will automatically hide after 3 seconds, I set the following code:

document.getElementById("alertMessageSel").style.display = "block";
document.getElementById("alertMessage").innerHTML = "两次输入手机号不一致！";
var t = Date.now();           
var t1 = Date.now() + 100;
while(t1 - t <= 3000) {
    t1 = Date.now();
};
document.getElementById("alertMessage").innerHTML = "";
document.getElementById("alertMessageSel").style.display = "none";

There is no problem with single-step debugging. It will be executed sequentially. I am referring to the break points. The effect is the same as I imagined. However, if you run it directly without break points, this effect will not occur.
I thought that js should have its own execution method during the running process.

2. I want to know the operating mechanism and how to implement it to achieve the desired effect.

Answer 1

document.getElementById("alertMessageSel").style.display = "block";
document.getElementById("alertMessage").innerHTML = "两次输入手机号不一致！";
setTimeout(function () {
    document.getElementById("alertMessage").innerHTML = "";
    document.getElementById("alertMessageSel").style.display = "none";
}, 3000);

Answer 2

This is from the original poster. When you click to display the pop-up frame, add a settimeout interval of three seconds to automatically hide the pop-up frame or remove the corresponding structure of the pop-up frame

Answer 3

What is blocking mechanism?
Js blocking mechanism is related to the single-thread processing method of Js engine. Each window has one JS thread. The so-called single thread means that only specific code can be executed at a specific time and blocks other code.
Because the browser is event driven, many behaviors in the browser are asynchronous (Asynchronized), and it is easy for events to be triggered simultaneously or continuously. When an asynchronous event occurs, the event will be created and placed in the execution queue, and the code will be executed after the current code execution is completed. Events such as mouse click events, timer trigger events, and XMLHttpRequest completion callbacks will all be put into execution. Waiting in queue.
Regarding the blocking mechanism of Js, you can look at the following piece of code. Generally, we will think that this code will log out 0,1,2

for(var i=0;i<3;i++){

setTimeout(function(){
    console.log(i);
}, 10);

}
In fact, the log result of this code is 3,3,3. This is a problem that newbies in JS can easily encounter. The specific reason is because of the blocking mechanism of the for loop. In the above code, the setTimeout timer needs to wait for the for loop to complete execution. After the for loop execution is completed, i is already 3, and setTimeout starts to be executed at this time, so console.log(i) will be 3.
As for why i is 3, please review the execution order of the for loop. When i is 2, the loop condition is met and the code block is executed. Then i++. At this time, i is 3. The loop condition is not met and the code block is not executed. , the cycle stops.
For the for loop, remember that the loop stops when the condition is not met. For the above code, it can be seen that it is not satisfied when i=3.
How to solve event blocking
In fact, blocking is a processing method of js engine. It is best not to think about solving "blocking", but to insert the code we want to execute into the "main thread". It’s hard to understand in this way, so let’s take the above code as an example and go directly to the code

for(var i=0;i<3;i++){

(function(i){
    setTimeout(function(){
        console.log(i);
    }, 10);
})(i)

In the above code, we added an anonymous function that is executed immediately, and passed i of the for loop as an actual parameter. In this way, setTimeout will be executed immediately without waiting (the editor doesn't know the details here, so I won't go into details. I probably guess that a new temporary thread is opened, the anonymous function is executed immediately, and then switched back immediately) .

Answer 4

Why not use a timer