js中setTimeout和setInterval的深入理解:它们之间的区别,原理,“异步“等

时间: 2017-11-16阅读: 231标签: js知识

setTimeout和setInterval的区别

setTimeout在执行时,是在载入后延迟指定时间后,去执行一次表达式,而setInterval则不一样,它从载入后是每隔指定的时间就执行一次表达式。当然我们可以通过重复调用setTimeout的方法,实现类似于setInterval一样达到周而复始的效果,下面我们就实现用setTimeout来模拟setInterval的效果:

function interval(fn,time){  //每隔1秒让++i
    fn();
    setTimeout(()=>{arguments.callee(fn,time);},time);//通过arguments.callee调用自身
}
//执行Interval函数
var i=0
interval(()=>{++i;console.log(i)},500); 
//重写Interval函数,从而起到关闭定时器的效果
interval = null;


setTimeout和setInterval的原理

但是需要注意的是:无论setTimeout还是setInterval里面的函数执行并不是时间到了就执行,而是:js主进程按顺序执行程序的同时,还有一个在进程空闲的时候执行的程序队列,而定时器就相当于在多少毫秒之后把回调函数放入空闲队列中去执行。如果空闲队列中同时存在其它程序,定时器中的回调执行顺序就不确定了。例如:

setTimeout(()=>{console.log("我是0秒执行")},0);
( function(){
	console.log("我是匿名函数中执行的")
})();
console.log("我在后面哦!");
//输出顺序:我是匿名函数中执行的  我在后面哦  我是0秒执行

看了上面的中输出我们会发现即使定时器中设置的时间为0,它仍然是最后输出的,由此可以看出它的时间并不是那么准确了,而是在js进程空闲的时候执行的。


setTimeout和setInterval的“异步”

通过上面我们已经知道,回调函数的执行是在多少时间插入空闲队列中并按顺序去执行,来达到延迟的效果,所以它的异步只是一个假象:它同样运行在一个线程上! 因为JS始终是单线程执行的。

那么如果在它们执行之前插入一个死循环,setTimeout和setInterval中的回调函数还会在执行吗,例如:

setTimeout(()=>{console.log("我还会执行吗?")},0); 
while(true) {};
console.log("执行不了我了!");

我们可以看到在控制台中什么都不会输出,直接是由于js是单线程,比堵塞了。而且有趣的是,你执行了这个代码,点击浏览器关闭当前页面都没反应了...


这篇文章就整理到这里了,希望对你的学习有一定的帮助。

Web Worker 详细介绍_Web Workers的使用

web worker 是运行在后台的 JavaScript,独立于其他脚本,也就是说在Javascript单线程执行的基础上,开启一个子线程,进行程序处理,而不影响主线程的执行。Service Worker 是一个由事件驱动的 worker,它由源和路径组成,以加载 .js 文件的方式实现的。

数字在JavaScript中是如何编译的

JavaScript中的所有数字都是浮点数。这篇博客文章解释了这些浮点数如何在64位二进制内部表示。浮点数并不一定等于小数,定点数也并不一定就是整数。所谓浮点数就是小数点在逻辑上是不固定的,而定点数只能表示小数点固定的数值

window.location.href的用法(动态输出跳转)

javascript中的location.href有很多种用法,window.location.href 语句可以实现一个框架的页面在执行服务器端代码后刷新另一个框架的页面

js的解析的两个阶段_预解析阶段、执行阶段

js不像C语言那样只要编译一次之后成.exe文件之后就不用在编译可以直接使用了,js是一种解释型语言,js同理是边解析边执行。js的解析分为两个阶段 1.预解析阶段 2.执行阶段。

js秒数转换成时分秒_js如何将秒拼接为时分秒显示?

接口返回的是int类型的秒数,在前端显示要求拼接为时分秒显示,这篇文章主要讲解实现js秒数转换成时分秒的方法。

JavaScript中变量提升和函数提升的意义理解

在ES6之前,Js中是没有块级作用域的,只存在全局作用域和函数作用域。变量提升即将变量声明提升到它所在作用域的最开始的部分;函数提升只有函数声明中才发生。

JavaScript中公有、私有、静态、受保护的属性和方法

在开发中,我们需要限制某些属性和方法的暴露程度,使得它们不能通过对象实例本身被访问、修改或调用。要了解js面向对象,就必需先了解js中什么是公有、私有、静态、受保护。

基于规则评分的密码强度检测算法分析及实现(JavaScript)

用正则表达式做用户密码强度的通过性判定,过于简单粗暴,不但用户体验差,而且用户帐号安全性也差。那么如何准确评价用户密码的强度,保护用户帐号安全呢?本文分析介绍了几种基于规则评分的密码强度检测算法

js设备判断_判断移动端还是PC端?判断android还是ios?判断移动端浏览器类型?

js判断用户的浏览设备是移动设备还是PC?判断详细浏览器设备信息。判断微信、新浪、QQ打开。判断是android系统还是ios系统...

javascript中关键词in用法介绍【js 关键字 in 的使用方法】

js中关键词...in... 从字面上理解就是什么在什么中,在js中差不多也是表达这个意思,主要作用:1用于数组和对象的判断、2 遍历数组或者对象