setTimeout时间设置为0详细解析


Posted in Javascript onMarch 13, 2018

前言

本文主要给大家介绍了关于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有一些妙用,但是他确实是在宏观任务队列中新增任务了,所以万万不能滥用啊。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
利用javascript中的call实现继承
Jan 22 Javascript
JAVASCRIPT  THIS详解 面向对象
Mar 25 Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
Sep 08 Javascript
jQuery中实现动画效果的基本操作介绍
Apr 16 Javascript
Jquery实现控件的隐藏和显示实例
Feb 08 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
Apr 25 Javascript
防止登录页面出现在frame中js代码
Jul 22 Javascript
使用jQuery简单实现模拟浏览器搜索功能
Dec 21 Javascript
JavaScript对Cookie进行读写操作实例
Jul 25 Javascript
JS库之wow.js使用方法
Sep 14 Javascript
记一次webpack3升级webpack4的踩坑经历
Jun 12 Javascript
jQuery轮播图实例详解
Aug 15 jQuery
vue-cli脚手架config目录下index.js配置文件的方法
Mar 13 #Javascript
用vue写一个仿简书的轮播图的示例代码
Mar 13 #Javascript
vue-cli脚手架引入图片的几种方法总结
Mar 13 #Javascript
解决vue-cli创建项目的loader问题
Mar 13 #Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
Mar 13 #Javascript
基于vue.js实现的分页
Mar 13 #Javascript
微信小程序中实现手指缩放图片的示例代码
Mar 13 #Javascript
You might like
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
CI(CodeIgniter)框架中的增删改查操作
2014/06/10 PHP
浅谈php7的重大新特性
2015/10/23 PHP
php微信开发之图片回复功能
2018/06/14 PHP
基于JavaScript 声明全局变量的三种方式详解
2013/05/07 Javascript
浅析JS中document对象的一些重要属性
2014/03/06 Javascript
使用命令对象代替switch语句的写法示例
2015/02/28 Javascript
js实现图片点击左右轮播
2015/07/08 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
2015/07/18 Javascript
javaScript实现滚动新闻的方法
2015/07/30 Javascript
JS制作图形验证码实现代码
2020/10/19 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
2016/09/20 Javascript
微信小程序 form组件详解及简单实例
2017/01/10 Javascript
vue.js全局API之nextTick全面解析
2017/07/07 Javascript
微信小程序中添加客服按钮contact-button功能
2018/04/27 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
2018/11/13 Javascript
详解使用angular框架离线你的应用(pwa指南)
2019/01/31 Javascript
vue基础之data存储数据及v-for循环用法示例
2019/03/08 Javascript
vue实例的选项总结
2020/06/09 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
2020/09/21 Javascript
[59:08]Ti4 冒泡赛第二天 NEWBEE vs Titan 2
2014/07/15 DOTA
Python实现3行代码解简单的一元一次方程
2014/08/18 Python
python如何重载模块实例解析
2018/01/25 Python
python实现指定字符串补全空格、前面填充0的方法
2018/11/16 Python
linux下安装python3和对应的pip环境教程详解
2019/07/01 Python
python中shell执行知识点
2020/05/06 Python
MATCHESFASHION.COM美国官网:英国奢侈品零售商
2018/10/29 全球购物
助人为乐模范事迹材料
2014/06/02 职场文书
建筑安全生产责任书
2014/07/22 职场文书
婚内房产协议书范本
2014/10/02 职场文书
信访维稳承诺书
2015/05/04 职场文书
三国演义读书笔记
2015/06/25 职场文书
工作后的感想
2015/08/07 职场文书
新年祝酒词大全
2015/08/11 职场文书
Pandas搭配lambda组合使用详解
2022/01/22 Python
vue route新窗口跳转页面并且携带与接收参数
2022/04/10 Vue.js