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 相关文章推荐
25个好玩的JavaScript小游戏分享
Apr 22 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
Jan 13 Javascript
JavaScript设计模式之装饰者模式介绍
Dec 28 Javascript
使用纯javascript实现放大镜效果
Mar 18 Javascript
js代码实现随机颜色的小方块
Jul 30 Javascript
完美解决js传递参数中加号和&号自动改变的方法
Oct 11 Javascript
Vue axios 中提交表单数据(含上传文件)
Jul 06 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
Dec 06 Javascript
require.js 加载过程与使用方法介绍
Oct 30 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
Nov 23 Javascript
vue强制刷新组件的方法示例
Feb 28 Javascript
bootstrap-table后端分页功能完整实例
Jun 01 Javascript
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
CI框架学习笔记(二) -入口文件index.php
2014/10/27 PHP
PHP函数func_num_args用法实例分析
2015/12/07 PHP
摘自启点的main.js
2008/04/20 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
2013/10/20 Javascript
js中reverse函数的用法详解
2013/12/26 Javascript
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
2015/12/14 Javascript
jQuery实现邮箱下拉列表自动补全功能
2016/09/08 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
2016/10/10 Javascript
easyUI combobox实现联动效果
2017/01/17 Javascript
浅析Angular2子模块以及异步加载
2017/04/24 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
2018/04/12 jQuery
JS中使用cavas截图网页并解决跨域及模糊问题
2018/11/13 Javascript
js定义类的方法示例【ES5与ES6】
2019/07/30 Javascript
element-ui封装一个Table模板组件的示例
2021/01/04 Javascript
python和shell实现的校验IP地址合法性脚本分享
2014/10/23 Python
pycharm配置pyqt5-tools开发环境的方法步骤
2019/02/11 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
Django之无名分组和有名分组的实现
2019/04/16 Python
python 随机森林算法及其优化详解
2019/07/11 Python
python字典的setdefault的巧妙用法
2019/08/07 Python
django drf框架自带的路由及最简化的视图
2019/09/10 Python
python conda操作方法
2019/09/11 Python
python logging通过json文件配置的步骤
2020/04/27 Python
python实现mask矩阵示例(根据列表所给元素)
2020/07/30 Python
学生如何注册Pycharm专业版以及pycharm的安装
2020/09/24 Python
Python代码覆盖率统计工具coverage.py用法详解
2020/11/25 Python
Python中BeautifulSoup通过查找Id获取元素信息
2020/12/07 Python
python安装mysql的依赖包mysql-python操作
2021/01/01 Python
阿玛尼化妆品美国官网:Giorgio Armani Beauty
2017/02/02 全球购物
纽约手袋品牌:KARA
2018/03/18 全球购物
马来西亚在线药房:RoyalePharma
2019/12/01 全球购物
同学聚会策划方案
2014/06/06 职场文书
建设工程授权委托书
2014/09/22 职场文书
实习生个人总结范文
2015/02/28 职场文书
什么是检讨书?检讨书的格式及范文
2019/11/05 职场文书