setTimeout和setInterval定时器使用详解测试
var len=4;
while(len--){
var time=setTimeout(function(){
console.log(len);
},0);
console.log(time);
};
控制台打印结果:
循环执行4次setTimeout给了4个ID,分别是1,2,3,4。而setTimeout函数是被放入函数队列中等待执行,虽然给予的间隔时间为0,但实际每个浏览器的最小间隔都不一样,小于那个值的时候,间隔数不确定。所以最后得出的结果是4个-1也就是循环执行完的结果,队列中放置了4个setTimeout函数。下面我们来测试,以chrome为例:
var startTime = new Date();
setTimeout(function () {
console.log(new Date() - startTime);
}, 100)
当为>100的时候,一直维持给定值。但若小于某个值则会随机给数,比如75,或者77。可以自己测试。具体规律还待研究。这个设定定时器的函数在队列中执行的真实时间间隔取决于后面同步执行的js需要占用多少时间,也即它既然在队列中,虽然设定了某值,但有可能超过这个时限才能执行。
setTimeout(function () {
func1();
}, 0)
func2(); 实例代码:
setTimeout(function(){
(function(){console.log(1)})();
}, 0);
(function(){console.log(2)})();
请问谁先执行?根据前面的分析,func2肯定先执行,然后是func1。
再来一题 setTimeout(function () {
func1()
}, 0)
和 setTimeout(function () {
func1()
})
有什么差别?
0秒延迟,此回调将会放到一个能立即执行的时段进行触发。javascript代码大体上是自顶向下的,但中间穿插着有关DOM渲染,事件回应等异步代码,他们将组成一个队列,零秒延迟将会实现插队操作。不写第二个参数,浏览器自动配置时间,在IE,FireFox中,第一次配可能给个很大的数字,100ms上下,往后会缩小到最小时间间隔,Safari,chrome,opera则多为10ms上下。
额外知识:《你真会用setTimeout吗?》《关于软件的生命周期》《JavaScript的setTimeout和setInterval的深入理解》
《JavaScript的setTimeout和setInterval的深入理解》这篇文章提到的几个知识点很好:
1.js是单线程。
2.setTimeout及setInterval只是伪异步,和伪多线程。
3.它的实现原理就是计算一个时间插入到代码队列中去,如果插入的代码前的执行不完,后面不会执行。
4.ajax实现的不过伪异步而已。
5.setTimeout函数的第一个参数将会在全局作用域内执行,因此参数内的 this
将会指向全局对象。
6.常犯的错误,setTimeout
函数的第一个参数指的是函数对象本身,不能写成类似 setTimeout(foo(), 1000)
,因为 foo()
是函数返回值,而不是 foo
本身。
7.即使回调函数的执行被阻塞,setInterval
函数依然会继续调用更多的回调函数。当间隔时间设置较小时,将会导致回调函数堆积。最简单且最可控的方式就是在回调函数内部使用 setTimeout
函数。
8.Javascript
中并没有内置的函数方法来清除所有的定时器(timeout
或 interval
),不过我们可以使用一种暴力的方法来清除所有的定时器。
// clear "all" timeouts
for(var i = 1; i < 1000; i++) {
clearTimeout(i);
}
但是很明显,由于指定最大值的限制,还会有定时器没有被清除掉。由于 ID
会随着定时器被调用的增加而增加,因此更好的方法是记录下最大的 ID
并一起清除。
// clear "all" timeouts
var biggestTimeoutId = window.setTimeout(function(){}, 1),
i;
for(i = 1; i <= biggestTimeoutId; i++) {
clearTimeout(i);
}9.不要使用字符串作为
setTimeout
或setInterval
函数的参数,当需要向回调函数中传递参数时,我们可以用匿名函数的,在匿名函数内部执行回调函数。
另外,尽量避免使用
js定时器setTimeout(longPress,500);和setTimeout("longPress()",500),setInterval
函数,从而避免可能导致的回调函数堆积现象。
10.js高级编程里写的setTimeout的第一个参数需要“”包裹,实际运用过程好像函数名的话,无所谓。这里的“”也可以直接传递可以运行的js代码,类似eval()实现的功能。
11.效果一样,推荐用前者,后者双重求值,类似的还有
eval
等。
12.
setTimeout((function(){
console.log("delayer:" + i);
})(),0);
调用setTimout的时候,相当于调用立刻执行函数返回的undefind。
setTimeout和setInterval定时器使用详解测试的更多相关文章
- 关于setTimeout()你所不知道的地方,详解setTimeout()
关于setTimeout()你所不知道的地方,详解setTimeout() 前言:看了这篇文章,1.注意setTimeout引用的是全部变量还是局部变量了,当直接调用外部函数方法时,实际上函数内部的变 ...
- 前端开发:setTimeout与setInterval 定时器与异步循环数组
前端开发:setTimeout与setInterval 定时器与异步循环数组 前言: 开通博客园三个月以来,随笔记录了工作中遇到的大大小小的难题,也看过无数篇令人启发的文章,我觉得这样的环境是极好的, ...
- 如何通过setTimeout理解JS运行机制详解
setTimeout()函数:用来指定某个函数或某段代码在多少毫秒之后执行.它返回一个整数,表示定时器timer的编号,可以用来取消该定时器. 例子 ? 1 2 3 4 5 console.log(1 ...
- 第一节:setTimeout和setInterval定时器
区别: setInterval函数的用法与setTimeout完全一致,区别仅仅在于setInterval指定某个任务每隔一段时间就执行一次,也就是无限次的定时执行. 取消定时器:(clearTim ...
- Cortex-M0系统滴答定时器Systick详解
上图是LPC1114系统滴答定时器(SysTick)的结构图.系统滴答定时器位于Cortex-M0内核中,也就是说,不论是LPC1114,还是其他的Cortex-M0内核单片机,都有这个系统定时器.其 ...
- linux系统编程之信号(八):三种时间结构及定时器setitimer()详解
一,三种时间结构 time_t://seconds struct timeval { long tv_sec; /* seconds */ long tv_usec; /* microsecond ...
- setInterval 与 clearInterval详解
首先注意,setInterval与clearInterval都是直属于window对象的. 1.直接调用setInterval(即不通过函数调用) <div id="oDiv_show ...
- Corex-M0 系统嘀嗒定时器 Systick 详解
- Spring Quartz定时器 配置文件详解
在JavaEE系统中,我们会经常用到定时任务,比如每天凌晨生成前天报表,每一小时生成汇总数据等等.我们可以使用java.util.Timer结合java.util.TimerTask来完成这项工作,但 ...
随机推荐
- php实现设计模式之 状态模式
<?php /*状态模式:允许一个对象在其内部状态改变时改变它的行为.对象看起来似乎修改了它的类.(行为模式) * * 在很多情况下,一个对象的行为取决于一个或多个动态变化的属性,这样的属性叫做 ...
- 【Java学习系列】第2课--Java语法及面向对象
本文地址 分享提纲: 1. Java程序特点 1.1 基本语法 1.2 字符串 1.3 变量 1.4 Java数组 1.5 Java枚举 1.6 Java修饰符 1.7 Java编译制定在制定目录 2 ...
- RESTful Api 身份认证安全性设计
REST是一种软件架构风格.RESTful Api 是基于 HTTP 协议的 Api,是无状态传输.它的核心是将所有的 Api 都理解为一个网络资源.将所有的客户端和服务器的状态转移(动作)封装到 H ...
- CSS选择器的权重与优先规则?
我们做项目的时候,经常遇到样式层叠问题,被其他的样式覆盖,或者写的权重不高没效果,对权重没有具体的分析,做了一个总结. css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用 ...
- [MySQL Reference Manual] 20 分区
20 分区 20 分区 20.1 MySQL的分区概述 20.2 分区类型 20.2.1 RANGE分区 20.2.2 LIST分区 20.2.3 COLUMNS分区 20.2.3.1 RANGE C ...
- MySQL排序原理与案例分析
前言 排序是数据库中的一个基本功能,MySQL也不例外.用户通过Order by语句即能达到将指定的结果集排序的目的,其实不仅仅是Order by语句,Group by语句,Distinct ...
- ASP.NET MVC Controllers and Actions
MVC应用程序里的URL请求是通过控制器Controller处理的,不管是请求视图页面的GET请求,还是传递数据到服务端处理的Post请求都是通过Controller来处理的,先看一个简单的Contr ...
- shell——awk
awk -F"分隔符" "command" filename awk -F":" '{print $1}' /etc/passwd 字段引用 ...
- BZOJ 1862: [Zjoi2006]GameZ游戏排名系统 [treap hash]
1862: [Zjoi2006]GameZ游戏排名系统 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 1318 Solved: 498[Submit][ ...
- linux-虚拟机centos6.5安装tools
1.在VMWare选VM -> Install VMWare Tools-,就会在桌面出现VMWare Tools图示让你安裝 2.进入CentOS桌面后,将光盘打开,看到了VMWareTool ...