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 ...
随机推荐
- Mysql 外键设置
MySql外键设置详解 (1) 外键的使用: 外键的作用,主要有两个: 一个是让数据库自己通过外键来保证数据的完整性和一致性 一个就是能够增加ER图的可读性 有些人认为外键的建立会给 ...
- C语言之固定格式输出当前时间
固定格式输出当前时间 编程实现将当前时间用以下形式输出:星期 月 日 小时:分:秒 年 代码如下: #include<stdio.h>#include<stdlib.h& ...
- 浏览器对body节点scrollTop解析的差异
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style t ...
- QT学习 之 三维饼图绘制
QT里没有相应统计图形的绘制组件 只有手工自己画 效果如图 void aaq::paintEvent( QPaintEvent* ev ) { QPainter painter(this); // 去 ...
- Mybatis 的Log4j日志输出问题 - 以及有关日志的所有问题
使用Mybatis的时候,有些时候能输出(主要是指sql,参数,结果)日志.有些时候就不能. 无法输出日志的时候,无论怎么配置log4j,不管是properties的还是xml的,都不起作用. 有些时 ...
- 基于visual Studio2013解决C语言竞赛题之0407最大值最小值
题目 解决代码及点评 这道题考察循环和比较 /*********************************************************************** ...
- Java学习之IO之File类二
之前学了File便想把我学习视频的名字改了,因为文件名太长不好看,便试着写了个功能实现 package com.gh.file; import java.io.File; /** * 批量文件命名 * ...
- Lync 2010升级到Lync 2013POC计划-过程!
最近在协助一家客户做升级项目调研,目前处在POC过程中,根据他们的需求我们将整个POC过程用Project 进行了下整理,了解整个项目中可能存在的风险和相应的计划过程,根据相应的计划我们能够将相应过程 ...
- Tour(KM算法)
Tour Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 65535/65535 K (Java/Others) Total Submi ...
- POJ 1692 Crossed Matchings(DP)
Description There are two rows of positive integer numbers. We can draw one line segment between any ...