Question

今天，我想知道Chrome中JavaScript函数“ alert（）”的执行顺序

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test1">
test1 test1 test1 test1 
</div>

<div id="test2">
test2 test2 test2 test2 
</div>

<input type="button" onclick="runTest()" value="start test">

<script>

function runTest()
{
  $('#test1').css('background-color', 'red');
  alert('test1');

  $('#test2').css('background-color', 'red');
	alert('test2');
}

</script>

在Firefox 62和IE11中（工作正常）：

1) BGcolor Line 1  
2) Alertbox 1  
3) (click OK)  
4) BGcolor Line 2  
5) Alertbox 2  
6) (click OK)

在Chrome 69.0.3497.100中：

1) Alertbox 1  
2) (click OK)   
3) Alertbox 2
4) (click OK)  
5) BGcolor Line 1  
6) BGcolor Line 2

Chrome为什么不启动alert（）并等待单击确定？

谢谢
奥利（Olli）

Answer 1

通过对类似问题进行一些研究，the answer for this one似乎是正确的：

...样式对象的更改触发了页面渲染器的重画请求消息，并且在该脚本例程结束之后，浏览器一进入空闲状态，便会对其进行处理。

显然，只有Chrome可以做到这一点。

Answer 2

问题是alert()是由浏览器软件而不是JavaScript运行时或CSS渲染引擎渲染的，并且浏览器通常比JavaScript运行时更快或更慢地运行。在这种情况下，alert是在JavaScript运行时和CSS渲染引擎可以更改背景颜色之前渲染的。而且，由于alert()是模式对话框，因此UI的其余部分将被阻止，直到alert()关闭为止，因此在此之前您看不到任何红色背景。

此问题的解决方案是通过将alert()渲染推迟到当前功能完成后再通过计时器来手动控制它：

function runTest() {
    $('#test1').css('background-color', 'red');
    // Timer callback functions are placed in the event queue and
    // won't run until the JavaScript call stack is idle. So,
    // makeAlert("test1") won't run until after runTest(), which
    // will allow the browser to color the background red before
    // the first alert is rendered.
    setTimeout(function(){
      makeAlert("test1");
    }, 100);
}

function makeAlert(msg){
    // Now, the first background has been applied and so
    // we can ask for the first alert().
    alert(msg);
      
    // Now, we'll set the second background color
    $('#test2').css('background-color', 'red');
    
    // And defer the second alert until after this function
    // is complete.
    setTimeout(function(){
      alert("test2");
    }, 100);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test1">test1 test1 test1 test1</div>
<div id="test2">test2 test2 test2 test2</div>

<input type="button" onclick="runTest()" value="start test">

Answer 3

function runTest() {
  setTimeout(function() {
    var a = document.querySelector('#test1');
    a.style.backgroundColor = 'red';
    alert('test1');
  }, 100);

  setTimeout(function() {
    var a = document.querySelector('#test2');
    a.style.backgroundColor = 'red';
    alert('test2');
  }, 200);
  }

    <div id="test1">
        test1 test1 test1 test1
    </div>

    <div id="test2">
        test2 test2 test2 test2
    </div>
    <input type="button" onclick="runTest()" value="start test">

Chrome-带有alert（）的JavaScript执行序列问题

3 个答案: