Detailed explanation of the execution order of JavaScript Alert function

question

A few days ago, I encountered a strange problem when writing HTML pages using JavaScript:

The function I want to achieve is to let users select different requirements through the confirm() pop-up window. After each selection, the selection result will be temporarily output to the page. After the last selection, the options will be passed to the backend for processing at once. The code is similar to:

var step1 = confirm("exec step1?");
$('#result').html($('#result').html() + "\n" + step1);
var step2 = confirm("exec step2?");
$('#result').html($('#result').html() + "\n" + step2);
var step3 = confirm("exec step3?");
$('#result').html($('#result').html() + "\n" + step3);

send(step1, step2, step3);

However, after running the code, I found that every time the confirm function was executed and the user selected an option, the page was not refreshed, and the results of step1 and step2 were not refreshed to the page in real time, but were displayed together with step3 in the last step.

I then tried alert() and prompt(), two dialog box functions similar to confirm, and the situation was the same. They would skip page rendering and be executed first.

At this point, there is an even weirder situation. After we assign a value to a div, we immediately alert the content in this div. We will find that the alert displays the correct content, but the content in the div is not updated, and it will be blocked until we click OK.

As shown in the figure:

The three functions of alert, prompt, and confirm are similar. Next, we will use the simplest alert as an example.

analyze

Before solving this problem, let's first understand what causes it. To understand it, we need to start with the JavaScript thread model.

The JavaScript engine runs in a single thread. The browser only has one thread running the JavaScript program at any time. The original intention was to reduce conflicts in shared resources such as DOM. However, a single thread will always face a problem, that is, blocking a certain section of code will cause all subsequent tasks to be delayed. And because JavaScript often needs to operate the page DOM and send HTTP requests, these I/O operations usually take a long time. Once blocked, it will give users a very poor user experience.

So the event loop was created. JavaScript puts all asynchronous operations or operations with I/O blocking into an event queue, executes the synchronous CPU code sequentially, and then reads the asynchronous events in the event queue and executes them sequentially when the JavaScript engine has no synchronous code and the CPU is idle.

These events include:

• Asynchronous delay events set by setTimeout();
• DOM operations related to layout and drawing events;
• Network I/O such as AJAX request events;
• User operation events, such as mouse clicks and keyboard strokes.

solve

Now that we understand the principle, we have a direction to solve this problem. Let's analyze this problem:

1. Since page rendering is a DOM operation, it will be placed in the event queue by the JavaScript engine;

2. alert() is a built-in function of window and is considered to be synchronous CPU code;

3. The JavaScript engine will execute the synchronous code first, and the alert pop-up window will appear first;

4. alert has a special blocking property, and the execution of the JavaScript engine is blocked;

5. Click "OK" in the alert, JavaScript is no longer blocked, and after executing the synchronous code, it reads the DOM operation in the event queue and the page rendering is completed.

The above reasons lead to the strange "Alert execution order problem". We can't turn page rendering into a synchronous operation, so we have to turn alert() into asynchronous code so that it can be executed after the page is rendered.

For this solution, we have two methods:

Replace Alert() function

First, let's consider replacing the functionality of the alert function. In fact, in most cases, we replace alert not because it does not conform to the execution order we expect, but because it is too ugly and does not support various beautification. You can imagine how discordant it is to have a gray and monotonous dialog box suddenly pop up on a website with a specific theme.

We can consider Bootstrap's modal module. Bootstrap is used on most websites, and introducing one more modal module will not have much impact. We use modal to construct a pop-up dialog box. Using modal's modal('toggle')/modal('show')/modal('hide') methods, we can easily control the visibility of the modal.

After replacing the dialog box, we still need to solve the problem of subsequent code execution. When using the alert function, the code will continue to execute after we click OK. However, this function is not available when using our custom dialog box. We need to consider binding the subsequent code to the click button of the dialog box. This requires the use of the DOM's onclick attribute. We extract the subsequent function content into a new function and bind this function to the button's onclick event after the dialog box pops up.

It is also important to note that the new function should include the content of closing the modal dialog box.

Of course, we can further optimize it and abstract a function to pop up a dialog box to replace the alert function. The example is as follows:

window.alert = function (message, callbackFunc) {
    $('#alertContent').html(message);
    $('#modal').show();
    $('#confirmButton').onclick(function () {
        $('#modal').hide();
        callbackFunc();
    });
};

In this way, we call the new alert function when we need a pop-up box, pass in callbackFunc, and do the subsequent work in it.

setTimeOut Function

Of course, not everyone is willing to use a new dialog box to replace the alert function dialog box. I always feel that the above method is not particularly elegant. In this regard, we can use another method to solve this problem.

Front-end students should be familiar with the setTimeout() function. Using it, you can delay the execution of certain code. As for delayed execution code, the JavaScript engine always puts the code into the event queue, checks whether the execution time has arrived, and then executes it at the appropriate time. When code enters the event queue, it means that the code becomes asynchronous like the page rendering event. Since the event queue is ordered, if we use setTimeout to delay execution, we can implement the alert function after the page is rendered.

The function prototype of setTimeout is setTimeout(code, msec), where code is the code or function to be made asynchronous, and msec is the delay time in milliseconds. Here we don't need it to delay, we just need it to become asynchronous, so we can set msec to 0;

Similarly, we also need to process the code after alert and put it together with alert in setTimeout for asynchronous execution. In this way, the code becomes setTimeout("alert('msg');doSomething();", 0);. If you think the code is not beautiful enough or the string is difficult to handle, you can encapsulate the subsequent code into a function and put it in doSomething().

summary

In the above two solutions, JavaScript callback functions are used. The former takes the function as the parameter of alert and binds it to the onclick event of DOM, while the latter uses setTimeout to convert the function to asynchronous execution. JavaScript callback functions are indeed very powerful and easy to use, but there is a hidden problem, which is the problem of nested callbacks. Single-layer callbacks are easy to understand, but if you want to implement a situation like my needs, with multiple alerts and page rendering executed in turn, you may face "callback hell". The function in the onclick event binding must be nested in the onclick function, and another setTimeout statement is required in setTimeout. Once a problem occurs, it is more troublesome to troubleshoot.

The above is a detailed explanation of the execution order problem of JavaScript Alert function. For more information about the execution order problem of JavaScript Alert function, please pay attention to other related articles on 123WORDPRESS.COM!