昼猫笔记 JavaScript -- 异步执行 | 定时器真的定时执行?
本篇主要内容:异步、定时器引发的思考
预计阅读时间:8分钟
了解
我们都知道在js中定时器有两种
setInterval()
、
setTimeout()
setInterval()
:按照指定的周期(以毫秒计)来调用函数或计算表达式。方法会不停地调用函数,直到
clearInterval()
被调用或窗口被关闭。
setTimeout()
:在指定的毫秒数后调用函数或计算表达式。
那么问题来了,定时器真的是定时执行的吗? 刚开始我认为定时器肯定是定时执行的啊,要不然怎么会叫做定时器呢,后来我感觉我好像错了,所以今天就来说说这个问题 定时器真的是定时执行的吗
测试
var start = Date.now()
console.log('启动定时器前...')
setTimeout(function () {
console.log('定时器执行了: ', Date.now()-start)
}, 100)
console.log('启动定时器后...');
我们会发现定时器执行了101ms, 一般会延迟一丁点(可以接受),说白了就是准确的,如果说300ms之后执行呢?
var start = Date.now()
console.log('启动定时器前...')
setTimeout(function () {
console.log('定时器执行了: ', Date.now()-start)
}, 100)
console.log('启动定时器后...');
for (var i = 0; i < 1000000000; i++) { }
如果像上边这种情况,本来是200ms,但是现在变成了1941ms,那还合适吗?
也就是说我们的定时器真的能保证定时吗?
答案是不能,也可能延迟执行,是在原有设定的时间上又有延迟,加入本来是200ms, 那么现在是1941ms,所以说定时器并不能真正保证定时执行
注意:定时器的回调函数是在主线程执行,无论是非回调函数还是回调函数都是在主线程执行
JS执行方式
这时候就说到了一个概念 --- js是单线程执行的
那如何证明js执行是单线程的呢?尤其是一些回调函数中,我们把握不住是主线程执行还是分线程执行的,所以我们现在就验证下js是单线程执行的
setTimeout(function () {
console.log('timeout 2')
}, 2000) setTimeout(function () {
console.log('timeout 1')
}, 1000)
function fn () {
console.log('fn()');
}
fn()
console.log('alert之前')
alert('提示...')
console.log('alert之后')
执行流程:fn() alert之前 弹窗
当我点击确认后,
timeout 2
和
timeout 1
是立即执行还是过一会执行
alert之后 timeout 1 timeout 2
我们发现是过一会执行,所以说
alert()
的作用是暂停当前主线程,同时暂停计时。 点击确认后,回复程序执行和计时
小结
如何证明js执行是单线程的? setTimeout()
的回调函数是在主线程执行的
定时器回调函数只有在运行栈中的代码全部执行完后才有可能执行
setTimeout(function () {
alert('2222222')
console.log('timeout 2')
}, 2000) setTimeout(function () {
alert('1111111')
console.log('timeout 1')
}, 1000)
function fn () { console.log('fn()');
}
fn()
console.log('alert之前')
alert('提示...')
console.log('alert之后')
其实呢到现在咱们也不能清楚地看到JS是如何执行的,要说到这个,我们就得说下代码分类,之前也写过代码分类,全局代码和函数局部代码。
代码分类
这一次呢我们分为初始化代码和回调代码
回调代码就是回调函数中的代码
setTimeout
是本文的初始代码
接下来就是比较重要的一段函数了
setTimeout(function () {
console.log('timeout 0')
}, 0)
console.log('昼猫')
这一段代码中是谁先执行?
总结
JS引擎执行代码的基本流程:
先执行初始化代码:包含一些特别的代码,例如:设置定时器、绑定事件监听、发送ajax请求
在后面在某个时刻才会执行回调代码
回调函数我们平常时候会说是异步执行
也就是说某些代码(某些东西)必须在所有的初始化代码执行后才有可能得到被执行,这样的代码我们成为异步代码
孔子东游记 公众号:昼猫笔记
文章转载公众号昼猫笔记
昼猫笔记 JavaScript -- 异步执行 | 定时器真的定时执行?的更多相关文章
- 昼猫笔记 JavaScript -- 作用域技巧!!
简单理解 var zm = function (x) { var code = 'bb' return code }; 学过js的老哥们都知道,当这样简单的一个函数进入浏览器,浏览器开始解释代码,会将 ...
- 昼猫笔记 JavaScript -- 面向对象(I)
本文内容搬运自公众号 原文链接 本文主要内容:面向对象 预计阅读时间:6分钟 面向对象的方式 单例模式(字面量定义) var obj = {} 类的实例 var obj = new Object() ...
- 昼猫笔记 JavaScript -- 闭包
本次主要内容是 闭包 阅读时间: 约 3分钟 记得点个赞支持支持我哦 初步了解 先看下代码,输出结果是多少? function fn1 () { var a = 2 function fn2 () ...
- 昼猫笔记 从此告别复杂代码--JavaScript
昼猫笔记--给你带来不一样的笔记 不止是笔记 更多的是思考 大家好,我是一只来自喵星的前端初学者,由于我们喵星人科技较为落后,昼猫从今天开始带着使命来到地球学习前端知识. 从今天开始,猫猫我就从Jav ...
- 昼猫笔记 -- 面向对象(II) - 继承
继承 由于js不像java那样是真正面向对象的语言,js是基于对象的,它没有类的概念. 所以,要想实现继承,可以用js的原型prototype机制或者用apply和call方法去实现,还有就是js可以 ...
- 昼猫笔记--什么是DOM
昼猫笔记--给你带来不一样的笔记 不止是笔记 更多的是思考 Hello,大家好,昼猫,今天来加深下DOM 什么DOM呢?它的全称叫 Document Object Model 通过全称可以知道它是 文 ...
- Spring定时器,定时执行(quartz)
这个定时器与继承了timertask的定时器不同的是,这个定时器是更强大的,可以指定每分的第n秒,每天的第n时,每周的.每年的.来定时运行这个定时器.那么下面来讲诉如何使用quartz定时器. spr ...
- [转]oracle job有定时执行的功能,可以在指定的时间点或每天的某个时间点自行执行任务。
oracle job有定时执行的功能,可以在指定的时间点或每天的某个时间点自行执行任务. 一.查询系统中的job,可以查询视图 --相关视图 select * from dba_jobs; selec ...
- ORACLE 定时执行存储过程
推荐用dbms_scheduler方式更好 (2012-11-19注) /* 查询: select job,broken,what,interval,t.* from user_jobs t; job ...
随机推荐
- 把一串数字表示成千位分隔形式——toLocaleString()
听说你用什么正则?我这有个骚操作了解下.. toLocaleString() 方法可把一个 Number 对象转换为本地格式的字符串. ().toLocaleString('en-US') " ...
- [poj3974] Palindrome 解题报告 (hash\manacher)
题目链接:http://poj.org/problem?id=3974 题目: 多组询问,每组给出一个字符串,求该字符串最长回文串的长度 数据范围支持$O(nlog n)$ 解法一: 二分+hash ...
- SQL控制语句基础
SQL变量 全局变量: 全局变量是由系统定义和维护的使用两个@作为前缀,不能由用户声明和赋值! 常用的全局变量如下 @@version :获取当前使用的SQL Server版本号 EG: select ...
- Android 设置AlertDialog的大小 .
AlertDialog dialog = builder.setTitle("消息列表") .setView(layout) .create(); dialog.show(); / ...
- Hibernate框架学习(一)——入门
一.框架是什么 1.框架是用来提高开发效率的 2.封装好了一些功能,我们需要使用这些功能时,调用即可,不需要手动实现 3.框架可以理解成一个半成品的项目,只要懂得如何驾驭这些功能即可 二.hibern ...
- hiho 1620 - 股票价格3 - 无限制的单调队列?
题目链接 小Hi最近在关注股票,为了计算股票可能的盈利,他获取了一只股票最近N天的价格A1~AN. 小Hi想知道,对于第i天的股票价格Ai,几天之后股价会第一次超过Ai. 假设A=[69, 73, 6 ...
- Reactive programming-文章解析
数据源(信息源):静态的数组.动态的流: In computing, reactive programming is a declarative programming paradigm concer ...
- 在vue组件中style scoped中遇到的坑
在uve组件中我们我们经常需要给style添加scoped来使得当前样式只作用于当前组件的节点.添加scoped之后,实际上vue在背后做的工作是将当前组件的节点添加一个像data-v-1233这样唯 ...
- 洛谷 P1983 车站分级 拓扑排序
Code: #include<cstdio> #include<queue> #include<algorithm> #include<cstring> ...
- LightOJ-1074 Extended Traffic 最短路问题 注意连通性
题目链接:https://cn.vjudge.net/problem/LightOJ-1074 题意 给一图 求最短路 若最短路<3或没有最短路,则输出'?' 思路 首先注意到可能存在负环,所以 ...