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

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


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

js中减少使用不必要的if-else或switch_利用数组/对象代替if-else,switch

无论使用if-else,还是switch。当条件多的时候代码显得非常冗长,而且每次添加条件时需要修改主流程的代码,这样就破坏了类的开闭原则。为解决日后的维护可能存在问题,我们可以采用另一种比较优雅的实现方式来替换if-else,switch吗?

JavaScript深入之参数按值传递

ECMAscript中所有函数的参数都是按值传递,也就是,把函数外部的值复制给函数内部的参数,就和把值从一个变量复制到另一个变量一样。js始终是按值传递,在这里称他为共享传递。

为什么尽量别用setInterval

在开发一个在线聊天工具时,经常会有过多少毫秒就重复执行一次某操作的需求。“没问题”,大家都说,“用setInterval好了。”我觉得这个点子很糟糕。

avaScript与WebAssembly进行比较+在哪些情况下会优于JavaScript

这是专门探索JavaScript及其构建组件的系列,在识别和描述核心元素的过程中,我们还分享了构建SessionStack时使用的一些经验法则,这是一个轻量级但健壮且高性能的JavaScript应用程序,以帮助用户实时查看和重现其Web应用程序的缺陷。

js判断是否为IE浏览器的多种方法总汇

这篇文章主要整理通过js来判断浏览器是否为IE的多种方法。使用js脚本判断浏览器是否为ie,这里分享六种判断是否为ie的方法,有需要的朋友参考学习下。

js中return关键词的作用_return的用法详解

return从字面意思来看就是返回,官方定义return语句将终止当前函数并可以返回当前函数的值; 也就是说return后面可以跟一个value,也就是说可以跟javascript中的任何数据类型

js记录用户行为浏览记录和停留时间

原来是想使用 cookie 来记录,但是考虑到 cookie 所能记录的数据最大为 4k ,可能不够用。于是使用了 HTML5 的 localStorage (最大数据 5M )来存储( IE8 以上浏览器支持)。这里使用到了 jquery.cookie 的插件,所以页面要引入 jquery 和 jquery.cookie 。

Web Worker 详细介绍_Web Workers的使用

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

数字在JavaScript中是如何编译的

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

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

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