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

更新日期: 2017-11-16阅读量: 2629标签: 定时器

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是单线程,比堵塞了。而且有趣的是,你执行了这个代码,点击浏览器关闭当前页面都没反应了...


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

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/115

Js中setTimeout()、setInterval()、链式setTimeout()

使用 setTimeout()和 setInterval()创建的定时器可以用于实现有趣且有用的功能。执行时机是不能保证的,因为在页面的生命周期中,不同时间可能有其他代码在控制 JavaScript 进程。在页面下载完后的代码运行

setInterval和setTimeout的区别以及setInterval越来越快问题的解决方法

setInterval()和setTimeout()方法都是js原生的定时方法,当然它们两个的作用也是不同的,并且最近在做上下滚动公告栏的时候,发现了setInterval()非常令人抓狂的问题,那就是用setInterval()做的定时滚动会随着浏览器页面切换变得无法控制!为什么会说无法控制呢

JS 定时器的4种写法及介绍

JS提供了一些原生方法来实现延时去执行某一段代码,下面来简单介绍一下setTiemout、setInterval、setImmediate、requestAnimationFrame。setTimeout: 设置一个定时器,在定时器到期后执行一次函数或代码段

从打字机效果的N种实现看JS定时器机制和前端动画

首先,什么是打字机效果呢?打字机效果即为文字逐个输出,实际上就是一种Web动画。一图胜千言,在Web应用中,实现动画效果的方法比较多,JavaScript 中可以通过定时器 setTimeout 来实现,css3 可以使用 transition 和 animation 来实现

如何使JavaScript休眠或等待

JavaScript不具有 sleep() 函数,该函数会导致代码在恢复执行之前等待指定的时间段。如果需要JavaScript等待,该怎么做呢?假设您想将三则消息记录到Javascript控制台,每条消息之间要延迟一秒钟

如何通过setTimeout理解JS运行机制详解

setTimeout()函数:用来指定某个函数或某段代码在多少毫秒之后执行。它返回一个整数,表示定时器timer的编号,可以用来取消该定时器。JavasScript引擎是基于事件驱动和单线程执行的,JS引擎一直等待着任务队列中任务的到来

为什么 Promise 比setTimeout() 快?

我们来做个实验。哪个执行得更快:立即解决的 Promise 还是立即setTimeout(也就是0毫秒的setTimeout)?promise.resolve(1)是一个静态函数,它返回一个立即解析的promise

浅谈JS之setTimeout与setInterval

setTimeout与clearTimeout,以及setInterval与clearInterval均属于Window对象方法。实例简单描述:该实例是通过Vue实现的,具体操作要求是单击【开始游戏】按钮3秒钟后执行走马灯效果,单击【结束游戏】按钮停止走马灯效果,具体代码如下:

JS setTimeout()基本用法

在制作网页动态效果时,可能会遇到需要延时在执行的需求,这时就可以用到 JS 中定时器来实现此类需求,本文将对setTimeout()做一个用法总结。

node-schedule 全局内关闭定时器

用Cron表达式完成定时器,全局内关闭定时器需要获取到定时器的引用,scheduleJob存在第四个参数,然而readme中没有提及,可知API

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!