<p><span id="span1">Hello World!</span></p>

<script type="text/javascript">
document.getElementById('span1').style.background = 'red';
alert(1); alert(2); alert(3);
</script>

先弹出1,弹2,弹3,之后span才改变背景色。why?

alert会阻塞所有线程,而且alert会被优先执行。

alert会阻塞所有线程,其中就包括GUI渲染线程(所以颜色不变)和主线程(所以setTimeout里面的任务只是在1秒后被添加到了任务队列里面,但是没有执行,需要你关闭了alert之后才会执行,但是你关闭第一个alert之后,马上又有同步任务了,所以那个第一个异步任务一直执行不了,必须等到所有同步任务执行完之后第一个异步任务才能执行, 后面两个异步任务同理)

参考:https://segmentfault.com/q/1010000006960660

alert 执行顺序问题的更多相关文章

  1. alert执行顺序

    <p><span id="span1">Hello World!</span></p> <script type=" ...

  2. JavaScript Alert 函数执行顺序问题

    * { color: #3e3e3e } body { font-family: "Helvetica Neue", Helvetica, "Hiragino Sans ...

  3. 对于javaScript中的alert和document.write()的执行顺序的记录

    代码: <script>//1----语句式的匿名函数创建以及调用 (function(name,age){ alert("name:"+name+",age ...

  4. alert执行时机和js线性模型 事件循环

    <div class="test">测试内容</div> <script> $('.test').text('内容改变') alert($('. ...

  5. 关于JavaScript预编译和执行顺序以及函数引用类型的思考

    昨晚在对项目中的一部分做模块化处理的时候,遇到了一个问题,一个重新定义的function对一个通用类中的function进行赋值覆盖的时候,失败了.问题抽象出来是这样的: <script > ...

  6. javaScript代码执行顺序

    javaScript是一种描述型脚本语言,由浏览器进行动态的解析和执行. 页面加载过程中,浏览器会对页面上载入的每个js代码块进行扫描. JavaScript是一段一段的分析执行的,在分析执行同一段代 ...

  7. javascript中的事件冒泡、事件捕获和事件执行顺序

    谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有 ...

  8. jquery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较

    想要添加这个效果,先来弄明白页面的加载和事件执行顺序,看这个简单例子: <html xmlns="http://www.w3.org/1999/xhtml"> < ...

  9. html/css基础篇——link和@inport详解以及脚本执行顺序探讨

    先说一说两者之间的异同 两者都可以引用外部CSS的方式,现在主流浏览器两者都支持(ps:@import是CSS2.1提出的),但是存在一定的区别: 1.link是XHTML标签,除了加载CSS外,还可 ...

随机推荐

  1. 机器学习-KNN分类器

    1.  K-近邻(k-Nearest Neighbors,KNN)的原理 通过测量不同特征值之间的距离来衡量相似度的方法进行分类. 2.  KNN算法过程 训练样本集:样本集中每个特征值都已经做好类别 ...

  2. Android开发更新UI的几种方式

    1.runOnUiThread 2.handler post 3.handler sendmessage 4.view post xml布局文件: <RelativeLayout xmlns:a ...

  3. Bootstrap table 元素列内容超长自动折行显示方法?

    共需要四步: 1.在table元素的父容器div加上:class="table-responsive" 3.设置表头th的width:<th width="20%& ...

  4. Tomcat服务器如何读取本地磁盘数据?

    实际问题: 如何让用户下载本地磁盘的资源文件呢?  在server.xml文件中配置虚拟路径如下(以下代码放在Host标签之中即可): 例如: 具体含义: 把本地磁盘目录 "D:\uploa ...

  5. [js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件

    隔行变色功能,不用js,直接用css伪类就可以做,这个实例可以作为js插件开发很好的入门级实例.本文实现的隔行变色包括以下功能: 1,支持2种常用结构共存( div元素 和 表格类型 ) 2,一个页面 ...

  6. Android 性能测试之方向与框架篇

    假期结束,你的状态有没有回归?那么,放空脑袋后,先来学习学习,欢迎大家继续关注腾讯云技术社区. 作者:李帅 导语 借项目的开发周期,把思考了一段时间的场景化性能测试框架搭建起来,包括 耗电性能测试.内 ...

  7. Hadoop通过HCatalog编写Mapreduce任务访问hive库中schema数据

    1.dirver package com.kangaroo.hadoop.drive; import java.util.Map; import java.util.Properties; impor ...

  8. DevOps之内容分发网络CDN

    唠叨话 关于德语噢屁事的知识点,仅提供专业性的精华汇总,具体知识点细节,参考教程网址,如需帮助,请留言. <内容分发网络CDN(Content Delivery Network)> 关于虚 ...

  9. OpenGL ES2.0贴图

    1.定义传入着色器的顶点数据及索引 //传入结构体 typedef struct { ]; ]; } Vertex; //顶点数据 const Vertex Vertices[] = { {{, -, ...

  10. 使用binlog2sql做数据恢复的简单示例

    有时我们会遇到操作人员误删或者误更新数据的情况,这时我们迫切希望把原来的数据还原回来,今天我们介绍一个简单的工具来方便的实现此功能. 前提条件 在实现数据恢复之前,需要我们的MySQL满足以下配置条件 ...