alert执行时机和js线性模型 事件循环
<div class="test">测试内容</div> <script> $('.test').text('内容改变') alert($('.test').text()) // 页面加载后首先时alert弹出,alert的内容为 ‘内容改变’,而dom此时还未发生变化,dom的内容是‘测试内容’ // 然后会一直堵塞,直到我们点击确认,alert消失时,页面内容才会变成‘内容改变’ // 所以alert prompt confirm等提示框都会跳过页面渲染先执行 </script>
解决这个问题之前先了解一下它是怎么导致的,而要了解它需要从 JavaScript 的线程模型说起。
JavaScript 引擎是单线程运行的,浏览器无论在什么时候都只且只有一个线程在运行 JavaScript 程序,初衷是为了减少 DOM 等共享资源的冲突。可是单线程永远会面临着一个问题,那就是某一段代码阻塞会导致后续所有的任务都延迟。又由于 JavaScript 经常需要操作页面 DOM 和发送 HTTP 请求,这些 I/O 操作耗时一般都比较长,一旦阻塞,就会给用户非常差的使用体验。
于是便有了事件循环(event loop)的产生,JavaScript 将一些异步操作或 有I/O 阻塞的操作全都放到一个事件队列,先顺序执行同步 CPU代码,等到 JavaScript 引擎没有同步代码,CPU 空闲下来再读取事件队列的异步事件来依次
执行。
这些事件包括:
setTimeout()
设置的异步延迟事件;- DOM 操作相关如布局和绘制事件;
- 网络 I/O 如 AJAX 请求事件;
- 用户操作事件,如鼠标点击、键盘敲击。
明白了原理, 再解决这个问题就有了方向,我们来分析这个问题:
- 由于页面渲染是 DOM 操作,会被 JavaScript 引擎放入事件队列;
alert()
是 window 的内置函数,被认为是同步 CPU代码;- JavaScript 引擎会优先执行同步代码,alert 弹窗先出现;
- alert 有特殊的阻塞性质,JavaScript 引擎的执行被阻塞住;
- 点击 alert 的“确定”,JavaScript 没有了阻塞,执行完同步代码后,又读取事件队列里的 DOM 操作,页面渲染完成。
由上述原因,导致了诡异的 “Alert执行顺序问题”。 我们无法将页面渲染变成同步操作,那么只好把 alert()
变为异步代码,从而才能在页面渲染之后执行。
解决方法:
etTimeout()
使用它,可以延迟执行某些代码。而对于延迟执行的代码,JavaScript 引擎总是把这些代码放到事件队列里去,再去检查是否已经到了执行时间,再适时执行。代码进入事件队列,就意味着代码变成和页面渲染事件一样异步了。由于事件队列是有序
的,我们如果用 setTimeout 延时执行,就可以实现在页面渲染之后执行 alert 的功能了。
setTimeout 的函数原型为 setTimeout(code, msec)
,code 是要变为异步的代码或函数,msec 是要延时的时间,单位为毫秒。这里我们不需要它延时,只需要它变为异步就行了,所以可以将 msec 设置为 0;
<div class="test">测试内容</div> <script> $('.test').text('内容改变') setTimeout(function(){ alert($('.test').text()) },0) // 由于使用setTimeout操作,使alert被放入到事件队列 , // 同时 $('.test').text('内容改变')也是在事件队列 // 所以 dom和alert的内容都是 ‘内容改变’
alert执行时机和js线性模型 事件循环的更多相关文章
- Node.js 的事件循环机制
目录 微任务 事件循环机制 setImmediate.setTimeout/setInterval 和 process.nextTick 执行时机对比 实例分析 参考 1.微任务 在谈论Node的事件 ...
- js的事件循环绑定和jQuery的隐式迭代
js的事件循环绑定和jQuery的隐式迭代 js事件循环绑定 jQuery隐式迭代 先举一个例子:给定一个ul,点击列表内的每一个li元素,使它的背景色变红,下边分别用js代码和jQuery实现. & ...
- JS JavaScript事件循环机制
区分进程和线程 进程是cpu资源分配的最小单位(系统会给它分配内存) 不同的进程之间是可以同学的,如管道.FIFO(命名管道).消息队列 一个进程里有单个或多个线程 浏览器是多进程的,因为系统给它的进 ...
- Node.js:事件循环
ylbtech-Node.js:事件循环 1.返回顶部 1. Node.js 事件循环 Node.js 是单进程单线程应用程序,但是通过事件和回调支持并发,所以性能非常高. Node.js 的每一个 ...
- 浏览器中 JS 的事件循环机制
目录 事件循环机制 宏任务与微任务 实例分析 参考 1.事件循环机制 浏览器执行JS代码大致可以分为三个步骤,而这三个步骤的往复构成了JS的事件循环机制(如图). 第一步:主线程(JS引擎线程)中执行 ...
- Js之事件循环(执行机制)
js的执行机制是事件循环 什么是事件循环? js引擎在执行代码时,首先会将同步代码加入到主线程中,异步代码会放到event table中注册回调函数, 当主线程空闲之后,event table中的回调 ...
- js的事件循环机制:同步与异步任务(setTimeout,setInterval)宏任务,微任务(Promise,process.nextTick)
javascript是单线程,一切javascript版的"多线程"都是用单线程模拟出来的,通过事件循环(event loop)实现的异步. javascript事件循环 事件循环 ...
- JS:事件循环机制、调用栈以及任务队列
点击查看原文 写在前面 js里的事件循环机制十分有趣.从很多面试题也可以看出来,考察简单的setTimeout也就是考察这个机制的. 在之前,我只是简单地认为由于函数执行很快,setTimeout执行 ...
- JavaScript之JS单线程|事件循环|事件队列|执行栈
本博文基于知乎"JavaScript作用域问题?"一问,而引起了对JavaScript事件循环和单线程等概念与实践上的研究.深入理解. 一.概念 0.关键词:JavaScript单 ...
随机推荐
- 巨杉数据库加入CNCF云原生应用计算基金会,共建开源技术生态
近日,巨杉数据库正式加入全球顶级开源社区,云原生应用计算基金会 (Cloud Native Computing Foundation,以下简称CNCF),成为CNCF基金会会员,是中国最早加入的开源云 ...
- phpmock测试
随着互联网发展,前后端分离的开发模式兴起,Mock也从以住的幕后走上了台面,让更多的人而得知, 以前传统的开发方式Mock大多局限在后端人员接触较多一些,那么什么是Mock? Mock其实就是真实数据 ...
- Linux 安装composer
wget https://getcomposer.org/installer //下载一个脚本文件 php installer //php执行下这个php脚本(虚拟机我没装环境.以下截图有操作流程) ...
- Java开发笔记(七十六)如何预防异常的产生
每个程序员都希望自己的程序稳定运行,不要隔三岔五出什么差错,可是程序运行时冒出来的各种异常着实烦人,令人不胜其扰.虽然可以在代码中补上try/catch语句捕捉异常,但毕竟属于事后的补救措施.与其后知 ...
- C# 定时器-System.Timers.Timer
using Newtonsoft.Json; using Rafy; using Rafy.Domain; using System; using System.Collections.Generic ...
- vue 页面跳转的两种方式
1,标签跳转 <router-link to='two'><button>点我到第二个页面</button></router-link> 2,点 ...
- vue遍历数组和对象的方法以及他们之间的区别
前言:vue不能直接通过下标的形式来添加数据,vue也不能直接向对象中插值,因为那样即使能插入值,页面也不会重新渲染数据 一,vue遍历数组 1,使用vue数组变异方法 pop() 删除数组最后一 ...
- 混用Int与IntPtr导致GetProcAddress始终返回null
注意NET某些类型在不同平台上的长度 NET中用句柄用得最多的是在DLLIMPORT中,混用int与intptr可能会导致某些API声明在X64平台中表现不正常,如 [DllImport(&quo ...
- EditText超出字数限制,给用户提示
当我们在Editext输入内容的时候,检测如果超过限制的长度无法输入内容,并且给用户提示. 首先我想到了下面的方法: editText.addTextChangedListener(new TextW ...
- linux c ---raise 使用范例的代码
把做工程过程中比较好的代码片段收藏起来,下面代码内容是关于linux c ---raise 使用范例的代码,希望对各位有所用途. #include <sys/types.h> #inclu ...