Everyone a great god about dom asynchronous operation guide-CodePudding

Document. The getElementById (" test "). The classList. Remove (" hide ");

Alert (' ok ');
</script>

The code above I want him to div show first, then the pop-up ok
But as I write the code above, he always pop up OK first, then show the div that what reason, how to break

CodePudding user response:

You want him to the execution of the order, but in fact this is simultaneous execution of two lines of code, you can output or interrupt point to look at, so you may need to add a judgment

CodePudding user response:

Document. The getElementById (" test "). The classList. Remove (" hide ");
SetTimeout (function () {
Alert (' ok ')
}, 500);
</script>

Can delay trigger alert after 0.5 s

CodePudding user response:

In addition to the timer is no way to let them synchronous execution

CodePudding user response:

Js code executed from top to bottom, you had actually shows the div, and then a pop-up box, not letter you can put the alert (' OK '), into a pop-up div class a try,
But because some mechanism (although I know, but I don't know what is the specific reason), the box will pop up your page in the subsequent process card,

CodePudding user response:

Just want to run the page if a pop-up window, suggest using div + write a fades, or use some pop-up plugin

CodePudding user response:

Remove (' hide '). Onpropertychange (function () {alert (' 0 k)}) try

CodePudding user response:

The

reference 6 building code for the family to

remove (' hide '). Onpropertychange (function () {alert (' 0 k)}) try

This alert failed

CodePudding user response:

The

reference 7 floor, 1 response:

Quote: reference 6 building code for the family to

Remove (' hide '). Onpropertychange (function () {alert (' 0 k)}) try

This alert failure

How failure? What are the tips?

CodePudding user response:

Js itself is synchronization; This is a browser rendering mechanism, js performed but haven't finished the browser rendering is performed alert alert will suspend the browser's rendering;

CodePudding user response:

The alert is like this, unless you don't have to

CodePudding user response:

You understand there is a problem, he is shown first, after a pop-up,

<meta charset="UTF-8">
Document
<style type="text/CSS" & gt;
# test {
width: 100px;
height: 100px;
Background - color: red;
}

. Hide {
display: none;
}
</style>

<body>

Document. The getElementById (" test "). The classList. Remove (" hide ");
If (document. GetElementById (" test "). The className. {
="hide")Alert (' ok ');
}
</script>

Page link：https//www.codepudding.com/frontend/9681.html

Prev:Questions about the event delegation

Next:Mobile terminal core Chrome browser scroll bar