本篇主要内容:异步、定时器引发的思考

预计阅读时间: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 -- 异步执行 | 定时器真的定时执行?的更多相关文章

  1. 昼猫笔记 JavaScript -- 作用域技巧!!

    简单理解 var zm = function (x) { var code = 'bb' return code }; 学过js的老哥们都知道,当这样简单的一个函数进入浏览器,浏览器开始解释代码,会将 ...

  2. 昼猫笔记 JavaScript -- 面向对象(I)

    本文内容搬运自公众号 原文链接 本文主要内容:面向对象 预计阅读时间:6分钟 面向对象的方式 单例模式(字面量定义) var obj = {} 类的实例 var obj = new Object() ...

  3. 昼猫笔记 JavaScript -- 闭包

      本次主要内容是 闭包 阅读时间: 约 3分钟 记得点个赞支持支持我哦 初步了解 先看下代码,输出结果是多少? function fn1 () { var a = 2 function fn2 () ...

  4. 昼猫笔记 从此告别复杂代码--JavaScript

    昼猫笔记--给你带来不一样的笔记 不止是笔记 更多的是思考 大家好,我是一只来自喵星的前端初学者,由于我们喵星人科技较为落后,昼猫从今天开始带着使命来到地球学习前端知识. 从今天开始,猫猫我就从Jav ...

  5. 昼猫笔记 -- 面向对象(II) - 继承

    继承 由于js不像java那样是真正面向对象的语言,js是基于对象的,它没有类的概念. 所以,要想实现继承,可以用js的原型prototype机制或者用apply和call方法去实现,还有就是js可以 ...

  6. 昼猫笔记--什么是DOM

    昼猫笔记--给你带来不一样的笔记 不止是笔记 更多的是思考 Hello,大家好,昼猫,今天来加深下DOM 什么DOM呢?它的全称叫 Document Object Model 通过全称可以知道它是 文 ...

  7. Spring定时器,定时执行(quartz)

    这个定时器与继承了timertask的定时器不同的是,这个定时器是更强大的,可以指定每分的第n秒,每天的第n时,每周的.每年的.来定时运行这个定时器.那么下面来讲诉如何使用quartz定时器. spr ...

  8. [转]oracle job有定时执行的功能,可以在指定的时间点或每天的某个时间点自行执行任务。

    oracle job有定时执行的功能,可以在指定的时间点或每天的某个时间点自行执行任务. 一.查询系统中的job,可以查询视图 --相关视图 select * from dba_jobs; selec ...

  9. ORACLE 定时执行存储过程

    推荐用dbms_scheduler方式更好 (2012-11-19注) /* 查询: select job,broken,what,interval,t.* from user_jobs t; job ...

随机推荐

  1. 把一串数字表示成千位分隔形式——toLocaleString()

    听说你用什么正则?我这有个骚操作了解下.. toLocaleString() 方法可把一个 Number 对象转换为本地格式的字符串. ().toLocaleString('en-US') " ...

  2. [poj3974] Palindrome 解题报告 (hash\manacher)

    题目链接:http://poj.org/problem?id=3974 题目: 多组询问,每组给出一个字符串,求该字符串最长回文串的长度 数据范围支持$O(nlog n)$ 解法一: 二分+hash ...

  3. SQL控制语句基础

    SQL变量 全局变量: 全局变量是由系统定义和维护的使用两个@作为前缀,不能由用户声明和赋值! 常用的全局变量如下 @@version :获取当前使用的SQL Server版本号 EG: select ...

  4. Android 设置AlertDialog的大小 .

    AlertDialog dialog = builder.setTitle("消息列表") .setView(layout) .create(); dialog.show(); / ...

  5. Hibernate框架学习(一)——入门

    一.框架是什么 1.框架是用来提高开发效率的 2.封装好了一些功能,我们需要使用这些功能时,调用即可,不需要手动实现 3.框架可以理解成一个半成品的项目,只要懂得如何驾驭这些功能即可 二.hibern ...

  6. hiho 1620 - 股票价格3 - 无限制的单调队列?

    题目链接 小Hi最近在关注股票,为了计算股票可能的盈利,他获取了一只股票最近N天的价格A1~AN. 小Hi想知道,对于第i天的股票价格Ai,几天之后股价会第一次超过Ai. 假设A=[69, 73, 6 ...

  7. Reactive programming-文章解析

    数据源(信息源):静态的数组.动态的流: In computing, reactive programming is a declarative programming paradigm concer ...

  8. 在vue组件中style scoped中遇到的坑

    在uve组件中我们我们经常需要给style添加scoped来使得当前样式只作用于当前组件的节点.添加scoped之后,实际上vue在背后做的工作是将当前组件的节点添加一个像data-v-1233这样唯 ...

  9. 洛谷 P1983 车站分级 拓扑排序

    Code: #include<cstdio> #include<queue> #include<algorithm> #include<cstring> ...

  10. LightOJ-1074 Extended Traffic 最短路问题 注意连通性

    题目链接:https://cn.vjudge.net/problem/LightOJ-1074 题意 给一图 求最短路 若最短路<3或没有最短路,则输出'?' 思路 首先注意到可能存在负环,所以 ...