JavaScript的setTimeout和setInterval的深入理解

算法织梦
• 阅读 6474

发表过一片博客《跟着我用JavaScript写计时器》,比较基础.....有网友说应该写一下setTimeout的原理和机制,嗯,今天就来写一下吧:

直奔主题:setTimeout和setInterval是如何工作的呢?

我们知道,js是单线程执行的(单线程j就是说在程序执行时,所走的程序路径按照连续顺序排下来,前面的必须处理好,后面的才会执行)。所以其实setTimeout和setInterval所谓的“异步调用”事实上是通过将代码段插入到代码的执行队列中实现的。
而如何计算插入的时间点呢?自然是要用到我们所说的timer,也就是计时器。当执行setTimeout和setInterval的时候,timer会根据你设定的时间“准确”地找到代码的插入点。当队列“正常”地执行到插入点时,就触发timer callback,也就是我们设定的回调函数:

 
function fn() { 
/* 
here is some codes 
*/ alert("javascript");
setTimeout(function() {alert('ok!')},1000); 
} 
onload=fn;

上面这个例子就是我们通常的用法,应该容易理解。可是,timer真的能那么准确么?代码队列的执行真的能那么正常么?

还记得吗?重新认识所谓的“异步”

刚刚已经知道,事实上setTimeout和setInterval只是简简单单地通过插入代码到代码队列来实现代码的延迟执行(或者说异步执行)。但是事实上所谓的异步只是一个假象——它同样运行在一个线程上! 始终是单线程!
那么问题就来了,要是在代码插入点前的代码执行时间超过了传入setTimeout或setInterval的设定时间会怎样呢?让我们来看看这段代码:

 
function fn() { 
setTimeout(function(){alert('can you see me?');},1000); 
while(true) {} 
} 

你觉得这段代码的执行结果是什么呢?答案是,alert永远不会出现。
JavaScript的setTimeout和setInterval的深入理解
这是为什么呢?因为,while这段代码没有执行完(如图,浏览器一直在解析while的代码),所以插入在后面的代码便永远不会执行。
综上所述,其实JS终归是单线程产物。无论如何“异步”都不可能突破单线程这个障碍。所以许多的“异步调用”(包括Ajax)事实上也只是“伪异步”而已。只要理解了这么一个概念,也许理解setTimeout和setInterval也就不难了。

点赞
收藏
评论区
推荐文章
Souleigh ✨ Souleigh ✨
4年前
为什么要用 setTimeout 模拟 setInterval ?
在JS事件循环之宏任务和微任务中讲到过,setInterval是一个宏任务。用多了你就会发现它并不是准确无误,极端情况下还会出现一些令人费解的问题。下面我们一一罗列..推入任务队列后的时间不准确定时器代码:setInterval(fn(), N);上面这句代码的意思其实是fn()将会在N秒之后被推入任务队列。所以,在setInterval
Souleigh ✨ Souleigh ✨
4年前
JavaScript 和 Node.js 中事件循环
1.JavaScript中事件循环可以参考《JavaScript忍者秘籍第二版》第十三章,讲解的很好。JavaScript中事件循环,主要就在理解宏任务和微任务这两种异步任务。宏任务(macrotask):setTimeOut、setInterval、setImmediate、I/O、各种callback、UI渲染、messageCh
Karen110 Karen110
3年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
Karen110 Karen110
3年前
一篇文章带你了解JavaScript时间
一、前言setTimeout(function,milliseconds)在等待指定的毫秒数后执行函数。setInterval(function,milliseconds)setTimeout()相同,但会重复执行。二、时间事件窗口对象允许在指定的时间间隔执行代码。时间间隔称为定时事件。1\.setTimeout()方法window.set
Souleigh ✨ Souleigh ✨
4年前
php为什么不支持定时器?
常见的定时器有两种:一种周期性定时执行,例如每天的凌晨三点出报表;另一种在指定时间后执行(一次),例如会员登录系统五分钟后发放每日登录奖励。两种情况对应shell中的cron和at命令,与JavaScript中的setInterval和setTimeout函数类似(严格来说setInterval是周期性执行,指定时间点执行需要自行处理)。image
Stella981 Stella981
3年前
JavaScript:再谈Tasks和Microtasks
JavaScript是单线程,也就是说JS的堆栈中只允许有一类任务在执行,不可以同时执行多类任务。在读js文件时,所有的同步任务是一条task,当然了,每一条task都是一个队列,按顺序执行。而如果在中途遇到了setTimeout这种异步任务,就会将它挂起,放到任务队列中去执行,等执行完毕后,如果有callback,就把callback推入到Tasks中去,
Stella981 Stella981
3年前
JavaScript同步、异步及事件循环
同步、异步JS是单线程的,每次只能做一件事情。像以下这种情况,代码会按顺序执行,这个就叫同步。console.log(1);console.log(2);console.log(3);以下代码会输出2、3、1,像这种不按顺序执行的,或者说代码执行中间有时间间隙的,叫异步。setTimeout((
Wesley13 Wesley13
3年前
PHP之定时任务(绝对实用)
在工作中经常会用到定时任务,除了在js中有定时器这个玩意可以用于前端页面的定时任务;那么后端PHP如何设置定时任务呢?一.如下是javascript中使用setTimeout和setInterval设置定时任务:1setTimeout(function(){2console.log('timeout');
Wesley13 Wesley13
3年前
JS定时器使用,定时定点,固定时刻,循环执行
本文概述:本文主要介绍通过JS实现定时定点执行,在某一个固定时刻执行某个函数的方法。比如说在下一个整点执行,在每一个整点执行,每隔10分钟定时执行的方法。JavaScript中有两个定时器方法:setTimeout()和setInterval()。这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript。实际上,setTimeout和s
京东云开发者 京东云开发者
10个月前
js基础之setTimeout与setInterval原理分析
setTimeout与setInterval概述setTimeout与setInterval是JavaScript引擎提供的两个定时器方法,分别用于函数的延时执行和循环调用。前者的主要思想是通过一个定时器,让函数在计时结束后再执行;后者则是每隔一定的时间,
美凌格栋栋酱 美凌格栋栋酱
5个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(