setTimeout、同步、异步的理解
console.log('111');
setTimeout(()=>{
console.log('222')
},1000);
console.log('333');
setTimeout(()=>{
console.log('444')
},0);
console.log(555);
就是执行这样一段js代码 , 打印出来的结果是 :
111 -> 333 -> 555 -> 444 -> 222
(结果就是我们理论起来 setTimeout 到底是同步还是异步的 ?为什么会这样执行 ? JavaScript不是一门单线程的语言吗?)
了解setTimeout 与 clearTimeout
setTimeout 接受两个参数,第一个是包含js代码的字符串和函数,第二个参数是等待多长时间的毫秒数,但经过该事件指定的代码不一定执行(下面讲解缘由)。clearTimeout 接受一个setTimeout 返回的id 值作为参数传递给它,取消代码的执行。
//设置超时调用
var timeoutId = setTimeout(function (){
alert("hello World");
},1000);
//取消掉用的代码
clearTimeout(timeoutId);
JavaScript中没有任何代码是立即执行的,但是只用进程一旦空闲就会立即执行,所以题目中设置的事件不过是经过多少毫秒数被添加到了队列中,而不是经过多少时间后就被执行。
在这里,我们需要有一点进程,线程的知识来支撑我们理解js中同步,异步的编程思想
众所周知,javascript是一门单线程的语言,即在js引擎中负责解释和执行js代码的线程只能有一个,但是,我们知道浏览器是多线程的。html5中提出了新的web标准,允许javascript 脚本创建多个线程,但子线程完全受主线程控制,且不得进行Dom操作,因此也并没有改变单线程的本质。
同步异步的理解
同步:假如一个函数返回时,调用者就能够得到预期结果(拿到了预期的返回值或者看到了预期的效果),这就是同步函数。
alert("hello World");
console.log("hello World");
异步:调用一个函数,返回的值不是预期的结果,需要通过一定的手段才能得到预期的返回值,这就是异步函数
var timeoutId = setTimeout(function (){
alert("hello World");
},1000)
异步执行的过程:
主线程发起一个异步请求,相应的工作线程(比如浏览器的其他线程)接收请求并告知主线程已收到(异步函数返回);主线程可以继续执行后面的代码,同时工作线程执行异步任务;工作线程完成工作后,通知主线程;主线程收到通知后,执行一定的动作(调用回调函数)。(工作线程将消息放到消息队列中,主线程通过时间循环去逐个取信息,)
发起函数 – 发起异步过程
回调函数 – 返回处理结果
事件循环的机制
主线程只会做一件事,就是从消息队列里面取消息、执行消息。当消息队列为空时,就会等待消息队列变成非空。只有当前的消息执行结束,才会去取下一个消息。这种机制就叫做事件循环机制Event Loop,取一个消息并执行的过程叫做一次循环。
setTimeout 函数的解决
在了解了以上的知识点后,我们就能够对setTimeout 函数有很好的理解,在执行我们本页开始的代码的时候,先在控制台输出 one ,然后主线程发起异步请求,工作线程接受请求,将setTimeout 经过设置的时间数推入消息队列,最终通过事件循环取出消息进行调用,这就是我们刚才开始看到结果的原因了。
setTimeout 到底是同步还是异步的 ?
除了放置异步任务的事件,"任务队列"还可以放置定时事件。
setTimeout()接受两个参数,第一个是回调函数,第二个是推迟执行的毫秒数。
需要注意的是,setTimeout()只是将事件插入了"任务队列",必须等到当前代码(执行栈)执行完,主线程才会去执行它指定的回调函数。要是当前代码耗时很长,有可能要等很久,所以并没有办法保证,回调函数一定会在setTimeout()指定的时间执行。
综上所属
setTimeout是单线程,类似异步,但不是异步 。
setTimeout、同步、异步的理解的更多相关文章
- 关于vue生命周期中的同步异步的理解
在vue官网中介绍生命周期的图如下: 主要测试代码如下: 主要是测试前四个生命周期beforeCreate,created,beforeMount,mounted,里面同步和异步的执行顺序,其它的类似 ...
- java 关于同步异步的理解
经常看到介绍 ArrayList 和HashMap是异步,Vector和HashTable是同步,这里同步是线程安全的,异步不是线程安全的,举例说明: 当创建一个Vector对象时候, Vector ...
- AJAX中的请求方式以及同步异步的区别
AJAX中的请求方式以及同步异步的区别请求方式,分为GET与POST: GET 最为常见的HTTP请求,普通上网浏览页面就是GET.GET方式的参数请求直接跟在URL后,以问号开始.(JS中用wind ...
- Java中线程同步的理解 - 其实应该叫做Java线程排队
Java中线程同步的理解 我们可以在计算机上运行各种计算机软件程序.每一个运行的程序可能包括多个独立运行的线程(Thread). 线程(Thread)是一份独立运行的程序,有自己专用的运行栈.线程有可 ...
- jquery ajax 同步异步的执行
jquery ajax 同步异步的执行 大家先看一段简单的jquery ajax 返回值的js 代码 function getReturnAjax{ $.ajax({ type:" ...
- java中线程同步的理解(非常通俗易懂)
转载至:https://blog.csdn.net/u012179540/article/details/40685207 Java中线程同步的理解 我们可以在计算机上运行各种计算机软件程序.每一个运 ...
- js中对同步和异步的理解
你应该知道,javascript语言是一门“单线程”的语言,不像java语言,类继承Thread再来个thread.start就可以开辟一个线程,所以,javascript就像一条流水线,仅仅是一条流 ...
- JS中同步与异步的理解
你应该知道,javascript语言是一门“单线程”的语言,不像java语言,类继承Thread再来个thread.start就可以开辟一个线程,所以,javascript就像一条流水线,仅仅是一条流 ...
- Netty基础系列(2) --彻底理解阻塞非阻塞与同步异步的区别
引言 在进行I/O学习的时候,阻塞和非阻塞,同步和异步这几个概念常常被提及,但是很多人对这几个概念一直很模糊.要想学好Netty,这几个概念必须要掌握清楚. 同步和异步 同步与异步的区别在于,异步基于 ...
随机推荐
- matlab中fseek 移至文件中的指定位置
文章来源:https://ww2.mathworks.cn/help/matlab/ref/fseek.html?searchHighlight=fseek&s_tid=doc_srchtit ...
- Flutter 开发从 0 到 1(三)布局与 ListView
上周日出去玩了,因此没时间写文章.我司加班到 11 点,第二天可以晚上班一个小时,加班到 12 点,可以晚上班两个小时,以此类推,为什么说这个,对的,加班第二天我没有多睡觉,而是起来抓紧时间写文章,好 ...
- Jmeter之『多变量循环』
假设存在两个参数a,b,需要在一个循环内,同时遍历a_1,a_2,a_3,b_1,b_2,b_3 添加一个循环控制器,循环次数为变量的大小 添加一个计数器,引用名称为index(用于拼接变量名称) 同 ...
- JVM性能调优(3) —— 内存分配和垃圾回收调优
前序文章: JVM性能调优(1) -- JVM内存模型和类加载运行机制 JVM性能调优(2) -- 垃圾回收器和回收策略 一.内存调优的目标 新生代的垃圾回收是比较简单的,Eden区满了无法分配新对象 ...
- Eating Peach (peach)
Description On this day, the little monkey went looking for food. He came to a rectangular peach gar ...
- 关于ptype_all和pypte_base中的pt_prev的说明[转]
不知道原帖,我是从这里看到了,解决了迷惑我很久的疑问,抄过来. 看见noble_shi兄弟"关于net_rx_action函数的若干问题"贴中关于pt_prev的问题, 本来想在论 ...
- python练习三角形,99乘法
#方案一:# result=0# #列# for i in range(1,10):# #行# for j in range(1,i+1):# result=i*j# print('%d*%d=%d' ...
- v-model数据绑定分析
v-model数据绑定分析 v-model是Vue提供的指令,其主要作用是可以实现在表单<input>.<textarea>及<select>等元素以及组件上创建双 ...
- logstash 过滤filter
logstash过滤器插件filter详解及实例 1.logstash过滤器插件filter 1.1.grok正则捕获 grok是一个十分强大的logstash filter插件,他可以通过正则解 ...
- javascript arcgis 取区域中心点
javascript arcgis 取区域中心点 //graphic是绘制完多边形之后返回的对象 //获得多边形的中心点坐标 var centerPoint=graphic.geometry.getE ...