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" οnkeydοwn="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" οnkeydοwn="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) 的作用


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/262073.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java websocket修改为同步_服务端向客户端推送消息技术之websocket的介绍

websocket的介绍在讲解WebSocket前&#xff0c;我们先来看看下面这种场景&#xff0c;在HTTP协议下&#xff0c;怎么实现。需求&#xff1a;在网站中&#xff0c;要实现简单的聊天&#xff0c;这种情况怎么实现呢&#xff1f;如下图&#xff1a;​当发送私信的时候&#xff0c;…

Extjs checkbox 多删除

var BankOrderstore new Ext.data.JsonStore //数据源({url: "../Handler/TxnRefund.ashx",totalProperty: ToTalRecord,root: "ResultData",listeners:{beforeload: function () {this.baseParams {"method": "QU…

汇编学习笔记(二)--数据处理的两个基本问题

1.div 除数 有8位和16位两种&#xff0c;在一个reg或者内存单元中 被除数 默认放在ax或者ax和dx中&#xff0c;如果除数位8位&#xff0c;被除数为16位&#xff0c;默认放在ax中&#xff1b; 如果除数为16位&#xff0c;被除数为32位&#xff0c;在dx和ax中存放&#xff0c;dx存…

oracle对sga统计信息不对,oracle 索引失效原因及解决方法

一、以下的方法会引起索引失效‍1,<>2,单独的>,3,like "%_" 百分号在前.4,表没分析.5,单独引用复合索引里非第一位置的索引列.6,字符型字段为数字时在where条件里不添加引号.7,对索引列进行运算.需要建立函数索引.8,not in ,not exist.9,当变量采用的是time…

python random randint_python中random.randint和random.randrange的区别详解

在python中&#xff0c;通过导入random库&#xff0c;就能使用randint 和 randrange 这两个方法来产生随机整数。那这两个方法的区别在于什么地方呢&#xff1f;让我们一起来看看&#xff01; 区别: randint 产生的随机数区间是包含左右极限的&#xff0c;也就是说左右都是闭区…

How to change max_allowed_packet size

2019独角兽企业重金招聘Python工程师标准>>> How to change max_allowed_packet size up vote 116 down vote favorite 40I am having a problem with BLOB fields in my MySQL database - when uploading files larger than approx 1M…

cmake,make,nmake的用法

于是开始找跨平台的编译工具&#xff0c;其中最有名的两个是 cmake 和 scons&#xff0c;cmake 之所以出名估计是因为 KDE 4 从 autotools 转向用 cmake 来编译。而 scons 则是 lighttpd 原来用的编译工具&#xff0c;它现在也转向 Python 了。cmake 和 python 大概代表了新一代…

CSS中em和px单位的区别(转)

这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章&#xff0c;题目有点吓人&#xff0c;但是确实是现在国内网页制作方面的一些缺陷。我一直也搞不清楚px与em之间的关系和特点&#xff0c;看过以后确实收获很大。平时都是用px来定义字体&#xff0c;所以无法用浏览器字体…

oracle的age datetime,python cx_Oracle插入TIMESTAMP字段后显示格式问题?

目标&#xff1a;A张表内有个 TIMESTAMP 字段&#xff0c;需要读取后插入到B表中&#xff1b;问题&#xff1a;使用 cx_Oracle模块读取该字段时显示为 datetime.datetime(2016, 9, 1, 0, 0, 1, 288000) 样式&#xff1b;使用 executemany 方法插入B表后&#xff0c;再次读取B表…

.net runtime占用cpu_.net 中的StringBuilder和TextWriter区别

最近闲来之余&#xff0c;看了一些开源的类库&#xff0c;看到有些类库喜欢用TextWriter类来记录相关的字符串数据&#xff0c;感到比较好奇&#xff0c;为啥不用StringBuilder类对象。于是在网上搜索了一番&#xff0c;总结了相关笔记。StringBuilder类在 .net 中,字符串作为一…

微信页面弹出窗口,底部不随窗口滑动而滚动

公司是做微信第三方公众平台&#xff0c;有一个购物系统&#xff0c;现在需要将商品页面模仿淘宝的样式&#xff0c;就是点击购物车或购买按钮&#xff0c;会弹出一个窗口&#xff0c;显示sku和数量。本来就是一个做java后台的&#xff0c;前端布局不是很懂&#xff0c;上网搜索…

基本java,jquery异步 的级联下拉列表

第一次写博客&#xff0c;为了就是记录自己的学习历程&#xff0c;做一个整理 业务需求&#xff1a;有两个下拉列表&#xff0c;部门列表和职位列表&#xff0c;实现级联 1:本功能是在strut2框架下完成的&#xff0c;在进入页面时通过action初始化部门下拉列表 前台代码如下&am…

AE中获得datalayer所对应的data的文件路径和文件名

<summary> 获得datalayer所对应的文件路径 </summary> <param name"pDataLayer">图层</param> <param name"pFilePath">文件路径</param> <param name"pFileName">文件名</param> <re…

oracle查询100到200数据,100分数据库查询语句(ORACLE 11g)

100分求一个数据库查询语句(ORACLE 11g)一张表tabl1 如下&#xff1a;epqname createtime endtime设备1 2014.10.01 11:00:00 2014.10.01 13:22:00设备2 2014.10.27 11:00:00 2014.10.…

python向数据库中添加参数_第四篇:python操作数据库时的传参问题

python在操作数据库执行sql的时候我们经常会遇到传参问题&#xff0c;以下是我总结的几种方法&#xff1a; 1、格式化字符串 city beijing cur.execute(“SELECT * FROM %s WHERE city %s”, city) 2、使用字典传递 sql “INSERT INTO user VALUES(%(username)s, %(password…

【GIT】使用Git命令窗口将本地工程提交至远程GitHub

目标&#xff1a; 1.解决的问题是如何通过Git命令窗口将本地工程提交至GitHub。 2.方便园友的同时也方便自己以后解决此类问题。 步骤&#xff1a; 1.首先登陆GitHub网站https://github.com/ 2.新建Repository 3.新建TicketBrushSystem的Repository&#xff0c;其中红框的几处可…

制作vb dll的总结

前段时间&#xff0c;同学接了一个项目&#xff0c;在网页上显示autoCAD的图。在做项目的过程中&#xff0c;遇到一个棘手的问题。在使用vb语言开发的第三方插件中&#xff0c;有一个函数是地址传值的方式传参。想在js中调用该函数&#xff0c;但是&#xff0c;js不支持类似指针…

[ASP,VB] - 利用ASP调用API COM接口实现开关机

来源&#xff1a;http://www.111cn.net/asp/3/35f5b04c0c9f40c9f03a1b56d641ac3f.htm 服务器脚本要控制些开关机命令模式的知都要调用win api接口来实现了&#xff0c;下面我们来看一个asp调用com实例开关机功能吧。ASP通过这个组件调用系统API&#xff0c;然后按照不同的重启和…

导致oracle 控制文件坏,异常断电导致ORACLE控制文件等受到破坏的处理

故障现象&#xff1a;客户某台WINDOWS服务器掉电&#xff0c;ORACLE数据库STARTUP提示控制文件CONTROL01.CTL、CONTROL02.CTL被破坏。一、处理控制文件异常故障方法&#xff1a;直接拷贝CONTROL0一、处理控制文件异常故障二、尝试启动SQL> startup;ORACLE例程已经启动。Tota…

softmax ce loss_手写softmax和cross entropy

import 解释下给定的数据&#xff0c;x假设是fc layer的输出&#xff0c;可以看到这里x是(3,3)的&#xff0c;也就是batch_size3&#xff0c;n_classes3。但是label给出了三个数&#xff0c;取值是0&#xff0c;1&#xff0c;因此这里必须要将label先变成one_hot的形式才能在cr…