解析setTimeout时间设置为0
1、开胃菜,setTimeout为何物
首先看一下w3school
上面对于setTimeout
的解释
setTimeout(fn,millisec) 方法用于在指定的毫秒数后调用函数或计算表达式。
很简单,setTimeout()
只执行 fn
一次,到底什么时候执行取决于第二个参数millisec
设定的毫秒数,所以很多人习惯上称之为延迟
,无非就是延迟一段时间后再执行里面的代码。
setTimeout(function(){ console.log('我是setTimeout'); }, 1000);
正常情况下,我是setTimeout
这句话并不会马上输出而是等1000毫秒以后会在浏览器的控制台输出。
2、主菜,js是单线程的
OK,看一个例子,这个例子的输出结果是什么?
setTimeout(function(){ console.log(1); }, 0); console.log(2); console.log(3);
出乎一些人的意料,得到的结果竟然是2、3、1
。这似乎不按套路出牌啊,明明是等待了0毫秒也就是不等待直接输出啊,为啥1
却在最后输出了呢?
这就需要搞清楚一个很重要的概念:js是单线程的,单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。如果前一个任务耗时很长,后一个任务就不得不一直等着。
其实很好理解,就像大家去超市买东西一样,所有买东西的人都需要在收银台排队结账,正常情况下每个收银台同一时间只能为一位顾客结账,这位顾客结账完成才能为下一位顾客服务。
而浏览器的内核是多线程的,它们在内核制控下相互配合以保持同步,一个浏览器至少实现三个常驻线程:javascript引擎线程
,GUI渲染线程
,浏览器事件触发线程
。
- javascript引擎是基于事件驱动单线程执行的,JS引擎一直等待着任务队列中任务的到来,然后加以处理,浏览器无论什么时候都只有一个JS线程在运行JS程序。
- GUI渲染线程负责渲染浏览器界面,当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时,该线程就会执行。但需要注意 GUI渲染线程与JS引擎是互斥的,当JS引擎执行时GUI线程会被挂起,GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。
- 事件触发线程,当一个事件被触发时该线程会把事件添加到待处理队列的队尾,等待JS引擎的处理。这些事件可来自JavaScript引擎当前执行的代码块如setTimeOut、也可来自浏览器内核的其他线程如鼠标点击、AJAX异步请求等,但由于JS的单线程关系所有这些事件都得排队等待JS引擎处理。(当线程中没有执行任何同步代码的前提下才会执行异步代码)
其实,当js代码执行遇到setTimeout(fn,millisec)
时,会把fn
这个函数放在任务队列中,当js引擎线程空闲时并达到millisec
指定的时间时,才会把fn
放到js引擎线程中执行。
setTimeout(fn,0)的含义是,指定某个任务在主线程最早可得的空闲时间执行,也就是说,尽可能早得执行。它在"任务队列"的尾部添加一个事件,因此要等到同步任务和"任务队列"现有的事件都处理完,才会得到执行。
HTML5标准规定了setTimeout()的第二个参数的最小值(最短间隔),不得低于4毫秒,如果低于这个值,就会自动增加。在此之前,老版本的浏览器都将最短间隔设为10毫秒。另外,对于那些DOM的变动(尤其是涉及页面重新渲染的部分),通常不会立即执行,而是每16毫秒执行一次。这时使用requestAnimationFrame()的效果要好于setTimeout()。
需要注意的是,setTimeout()只是将事件插入了"任务队列",必须等到当前代码(执行栈)执行完,主线程才会去执行它指定的回调函数。要是当前代码耗时很长,有可能要等很久,所以并没有办法保证,回调函数一定会在setTimeout()指定的时间执行。
3、甜品,setTimeout的妙用
其实setTimeout
是有一些妙用的,这里简单列举几个。
函数去抖
让一个函数在一定间隔内没有被调用时,才开始执行被调用方法。比如当你在使用 google 搜索内容的时候,有些关键词输入到一半,谷歌会展示一个可选列表,根据你当前输入的内容作出的一个猜测联想。需要监听文字改变,每一次改变都会调用一次回调函数,现在需要的一种实现是在用户停止键盘事件一段时间后,去发送一个请求。
var debounce = function(method, context) { clearTimeout(method.tId); method.tId = setTimeout(function(){ method.call(context); },100); }
轮训任务
js中可以使用setInterval
开启轮询,但是这种存在一个问题就是执行间隔往往就不是你希望的间隔时间。
比如有个轮询任务间隔是100ms,但是执行方法的时间需要450ms,那么在200ms、300ms、400ms本来是计划中执行任务的时间,浏览器发现第一个还未执行完,那么就会放弃2、3、4次的任务执行,并且在500ms之后再次执行任务,这样的话,其实再次执行的间隔就只有50ms。使用setTimeout构造轮询能保证每次轮询的间隔。
setTimeout(function () { console.log('我被调用了'); setTimeout(arguments.callee, 100); }, 100);
延迟js引擎的调用
var div = document.createElement('div'); div.innerHTML = '我是一个div'; div.setAttribute('style', 'width:200px; height:200px;background-color:#f00; '); document.body.appendChild(div); setTimeout(function() { console.log('我被调用了'); }, 1000);
虽然setTimeout有一些妙用,但是他确实是在宏观任务队列中新增任务了,所以万万不能滥用啊。
推荐阅读
-
Python中为feedparser设置超时时间避免堵塞
-
CAD怎么将标高设置为0? cad设置标高的方法
-
php set_time_limit(0) 设置程序执行时间的函数
-
iOS常用算法之两个有序数组合并(要求时间复杂度为0(n))
-
cdr12自动保存怎么设置间隔时间为10分钟?
-
Java 读取 Nginx 日志记录并解析 [04/Nov/2020:18:54:11 +0800] 字段为正常时间信息
-
默认的Word页码格式为从0开始 设置三位数字页码显示的具体方法
-
国标GB28181协议视频平台EasyGBS级联上级平台时间戳为0是什么原因?
-
iOS常用算法之两个有序数组合并, 要求时间复杂度为0(n)
-
Teambition任务时间视图怎么设置为新版甘特图?