javascript – JS – 为什么这样的代码执行顺序？ (初级水平)

2019-08-28 20:35:16 阅读：131 来源： 互联网

JS代码执行顺序背后的逻辑是什么？
我希望在单击按钮后,背景变为红色,然后显示消息.但是,在我单击“确定”后,该消息首先出现并且颜色应用于背景 – > CodePen.
在点击“确定”之前,将背景设为红色的正确和正确方法是什么？

function run(){
  document.body.style.backgroundColor = 'red';
  alert('Contratulations!');
}

<html>
<head></head>
<body>
  <button onclick="run()">Click me!</button>
</body>
</html>

解决方法:

代码按您期望的顺序执行,但是,每个语句都不是同步的,因为它们调用Webbrowser提供的功能.

浏览器执行在UI线程上不会发生Javascript.因此,当您更改DOM(允许Javascript与浏览器HTML交互的抽象)时,它会触发对UI(浏览器页面)的更新,该更新与javascript执行分开.底层DOM元素已更新,但实际UI存在非即时更新.

在您的代码中,更改DOM元素后,代码会立即触发浏览器显示警报.显示警报是特定于浏览器的行为,对于Chrome,它会暂停UI更新,并要求您在继续之前与警报进行交互.在Firefox中,更新UI后会显示警报.

两个浏览器之间的行为只是浏览器呈现引擎和事件循环的实现方式的差异.

function run(){
  document.body.style.backgroundColor = 'red';
  setTimeout(function() {
    alert('Contratulations!');
  },0 );
}

<html>
<head></head>
<body>
  <button onclick="run()">Click me!</button>
</body>
</html>

这个答案有关于如何解决问题的更多信息,Why is setTimeout(fn, 0) sometimes useful?

通过调用setTimeout,您可以将警报显示添加到javascript事件循环的末尾,从而为UI提供足够的更新时间.

标签：javascript,execution
来源： https://codeday.me/bug/20190828/1755332.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – JS – 为什么这样的代码执行顺序？ (初级水平)