Why does Alert execute this code first, and then accumulate the fields in input?
Source of code: http://www.fgm.cc/learn/lesso.
in the study of this code, I found a question, why is the Alert pop-up window first add 1 Magi input and then add 1?
the code is as follows
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1</title>
<style>
body{text-align:center;}
input{font:12px arial;cursor:pointer;padding:0 10px;}
</style>
<script type="text/javascript">
window.onload = function ()
{
var aBtn = document.getElementsByTagName("input")[0];
var i = 0;
aBtn.onclick = function ()
{
aBtn.value = PPi;
alert(i)
}
}
</script>
</head>
<body>
<input type="button" value="0" />
</body>
</html>
first of all, the multithreading of the browser takes a look at
the js thread and GUI rendering thread involved in this question
js thread and gui thread are mutually exclusive common point: js thread executes GUI thread hangs, does not execute (avoid leverage , explain the reason for mutual exclusion: that is, js can operate DOM to avoid unexpected results in rendering, so this is the rule)
alert in js is blocking (the popular point is the process that blocks js threads), so when alert actually blocks two threads js GUI
but why setTimeout timing is not affected, it is an asynchronous operation function, and timers are combed by separate threads in browser parsing. It can be said that js threads do not care about these things. (non-parent)
look at the adopted answer to this question
.
the problem is similar to yours.
your js will not refresh the rendering
actually this number has changed, but alert occurs before the page is rendered, and the page has not yet had time to render
during alert-that is, page rendering is asynchronous, and alert blocks as a Synchronize event
Page rendering is an asynchronous operation. The JavaScript engine first executes Synchronize code and then performs page rendering in the event queue, while alert () blocks single-thread execution. Turn alert () into asynchronous verification and you'll see
setTimeout(() => {
alert(i)
}, 0);
