html - JavaScript behaviour with blocking code -
function simulatecomplexoperation(sleepduration) { var = new date().gettime(); while (new date().gettime() < + sleepduration) { /* nothing */ } } function testfunction() { document.getelementbyid('panel1').style.display = 'none'; console.log('before'); simulatecomplexoperation(2000); console.log('after'); }
<div id='panel1'> text hidden </div> <button onclick="testfunction()">hide</button>
(jsfiddle)
this timeline:
- prints "before"
- wait 2 seconds
- prints "after"
- hide element id 'panel1'
why not:
- hide element id 'panel1'
- prints "before"
- wait 2 seconds
- prints "after"
is there way force style change operation first?
you preferably use settimeout. it's caused scheduling of code browser.
function simulatecomplexoperation(sleepduration) { var = new date().gettime(); while (new date().gettime() < + sleepduration) { /* nothing */ } } function testfunction() { document.getelementbyid('panel1').style.display = 'none'; console.log('before'); settimeout(() => { console.log('after'); }, 2000); }
<div id='panel1'> text hidden </div> <button onclick="testfunction()">hide</button>
Comments
Post a Comment