javascript真的是异步的吗?且看setTimeout的实现原理以及setTimeout(0)的使用场景
在今天之前我一直以为setTimeout这个函数是异步的,无意中看到了一篇关于setTimeout的文章。发现自己曾经的认识全是错误的,赶紧总结下。
先看一段代码:
var start = new Date();
setTimeout(function(){
var end = new Date();
console.log("Time elapsed: ", end - start, "ms");
}, 500); while (new Date - start <= 1000)
{ }
运行这段脚本能够看到:Time elapsed的值大概在1001ms左右,肯定会超过1000ms。也就是说:setTimeout失效了,指定的函数并没有在500ms后运行。而是延迟到1000ms后才运行。
再看一段代码:
function a()
{
setTimeout(function(){console.log(1);},0);
console.log(2);
}
a();
执行这段脚本能够看到:先打印2后打印1,我们在setTimeout里面指定了0ms,希望能马上执行,可是实际上没有效果。
想要理解上面的2段代码,我们得了解一下javascript中setTimeout的实现原理。首先牢记一点:JavaScript 是单线程运行的,也就是无法同一时候运行多段代码。
以下这段解释来自这篇博客:
JavaScript是单线程运行的,无法同一时候运行多段代码。当某一段代码正在运行的时候,全部兴许的任务都必须等待,形成一个队列。
一旦当前任务运行完毕,再从队列中取出下一个任务,这也常被称为 “堵塞式运行”。所以一次鼠标点击,或是计时器到达时间点,或是Ajax请求完毕触发了回调函数。这些事件处理程序或回调函数都不会马上运行,而是马上排队。一旦线程有空暇就运行。假如当前 JavaScript线程正在运行一段非常耗时的代码,此时发生了一次鼠标点击。那么事件处理程序就被堵塞。用户也无法马上看到反馈。事件处理程序会被放入任务队列。直到前面的代码结束以后才会開始运行。假设代码中设定了一个
setTimeout,那么浏览器便会在合适的时间。将代码插入任务队列。假设这个时间设为 0,就代表马上插入队列,但不是马上运行。仍然要等待前面代码运行完成。
所以 setTimeout 并不能保证运行的时间。是否及时运行取决于 JavaScript 线程是拥挤还是空暇。
也就是说setTimeout仅仅能保证在指定的时间过后将任务(须要运行的函数)插入队列等候,并不保证这个任务在什么时候运行。运行javascript的线程会在空暇的时候,自行从队列中取出任务然后运行它。javascript通过这样的队列机制。给我们制造一个异步运行的假象。
var start = new Date();
setTimeout(function(){
var end = new Date();
console.log("Time elapsed: ", end - start, "ms");
}, 500); console.log("task finished.");
我们之所以会感觉到这段代码是在异步运行,这是由于javascript线程并没有由于什么耗时操作而堵塞,所以能够非常快地取出排队队列中的任务然后运行它。
如今我们知道了setTimeout的原理了,如今看下setTimeout(0)的使用场景。以下这个样例来自这篇文章。
<input type="text" onkeydown="show(this.value)">
<div></div>
<script type="text/javascript">
function show(val) {
document.getElementsByTagName('div')[0].innerHTML = val;
}
</script>
这里绑定了 keydown 事件,意图是当用户在文本框里输入字符时。将输入的内容实时地在 <div> 中显示出来。可是实际效果并不是如此,能够发现。每按下一个字符时,<div> 中仅仅能显示出之前的内容,无法得到当前的字符。
<input type="text" onkeydown="var self=this; setTimeout(function() {show(self.value)}, 0)">
<div></div>
<script type="text/javascript">
function show(val) {
document.getElementsByTagName('div')[0].innerHTML = val;
}
</script>
这段代码使用了setTimeout(0)就能够实现需要的效果了。
这里事实上涉及2个任务,1个是将键盘输入的字符回写到输入框中。一个是获取文本框的值将其写入div中。第一个是浏览器自身的默认行为。一个是我们自己编写的代码。非常显然。必需要先让浏览器将字符回写到文本框。然后我们才干获取其内容写到div中。改变顺序,这这正是setTimeout(0)的作用。
參考文章:setTimeout(0) 的作用
javascript真的是异步的吗?且看setTimeout的实现原理以及setTimeout(0)的使用场景的更多相关文章
- setTimeout的实现原理以及setTimeout(0)的使用场景
先看一段代码: var start = new Date(); setTimeout(function(){ var end = new Date(); console.log("Tim ...
- 标 题: JavaScript真的要一统江湖了
http://www.newsmth.net/nForum/#!article/Python/125347?p=4 标 题: JavaScript真的要一统江湖了 发信站: 水木社区 (Fri Se ...
- JavaScript真的要一统江湖了
ttp://www.newsmth.net/nForum/#!article/Python/125347?p=4 标 题: JavaScript真的要一统江湖了 发信站: 水木社区 (Fri Sep ...
- setTimeout,setInterval原理
function a() { setTimeout(function(){alert(1)},0); alert(2); } a(); 和其他的编程语言一样,Javascript中的函数调用也是通过堆 ...
- JavaScript是如何工作的:Web Workers的构建块 + 5个使用他们的场景
摘要: 理解Web Workers. 原文:JavaScript是如何工作的:Web Workers的构建块 + 5个使用他们的场景 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这 ...
- setTimeout的核心原理和巧用
你所不了解的setTimeout 发表于 2015年11月23日 by 愚人码头 被浏览 14,756 次 分享到: 0 小编推荐:掘金是一个高质量的技术社区,从 ECMAScript 6 到 Vue ...
- 跟vczh看实例学编译原理——一:Tinymoe的设计哲学
自从<序>胡扯了快一个月之后,终于迎来了正片.之所以系列文章叫<看实例学编译原理>,是因为整个系列会通过带大家一步一步实现Tinymoe的过程,来介绍编译原理的一些知识点. 但 ...
- 跟vczh看实例学编译原理——三:Tinymoe与无歧义语法分析
文章中引用的代码均来自https://github.com/vczh/tinymoe. 看了前面的三篇文章,大家应该基本对Tinymoe的代码有一个初步的感觉了.在正确分析"print ...
- JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能
摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...
随机推荐
- UNIX 缩写风格
构建于图形界面之上的操作系统,使用鼠标作为主输入设备, 是否使用缩写并不重要.比如 Windows 系统中的目录,几乎都是全称…… 点击两次鼠标进入文件夹 pf, 并不意味着点击13次才能进入文件夹 ...
- python none,null,,,,,类型
内建类型None表示一个空对象,没有方法和属性. None是一个特殊的常量. None和False不同. None不是0. None不是空字符串. None和任何其他的数据类型比较永远返回False. ...
- 深入探究VC —— 资源编译器rc.exe(3)
Windows应用程序中,图标.菜单.畏途.图标.工具条.对话框等是以资源的形式存在的.开发人员也可以自定义资源类型.如果一个程序使用了资源,那么它在构建时需要对资源进行编译.程序所使用的资源会在资源 ...
- iOS学习之NSAttributedString(富文本)
NSAttributedString 叫做富文本,是一种带有属性的字符串,通过它可以轻松的在一个字符串中表现出多种字体.字号.字体大小等各不相同的风格,还可以对段落进行格式化,一般都是对可变富文本(N ...
- TCP/IP之TCP交互数据流、成块数据流
建立在TCP协议上的网络协议有telnet,ssh,ftp,http等等.这些协议根据数据吞吐量来分成两大类: (1)交互数据类型,例如telnet,ssh,这种类型的协议在大多数情况下只是做小流量的 ...
- ThinkPHP - URL - 伪静态 - 路由 - 重写
URL: 一.URL规则 1.默认是区分大小写,可以修改(配置文件)为不区分大小写. 2. //修改URL大小写问题 'URL_CASE_INSENSITIVE' =>true, 如果模块名为 ...
- 【Oracle】SQL*Loader-522: lfiopn failed for file
Linux下使用sqlldr进行批量操作,此操作会自动生成和删除临时文件. 因此,当前操作的用户必须具备对存放文件的文件夹有增删改的权限. 使用root登录,修改改文件夹权限为777即可. chmod ...
- AFNetworking 3.0x版本最新特性
AFNetworking是一款在OS X和iOS下都令人喜爱的网络库.为了迎合iOS新版本的升级, AFNetworking在3.0版本中删除了基于 NSURLConnection API的所有支持. ...
- [Swust OJ 842]--实验室和食堂(最短路,Dijkstra算法)
题目链接:http://acm.swust.edu.cn/problem/842/ Time limit(ms): 1000 Memory limit(kb): 10000 Description ...
- Linux如何修改SSH端口号
SSH是什么? SSH 为 Secure Shell 由 IETF 的网络工作小组(Network Working Group)所制定: SSH 是建立在应用层和传输层基础上的一种安全协议. SSH传 ...