浅谈setTimeout 与 setInterval

最新写代码中时，看到项目中有人用到了 setTimeout(fun,0)，于是想总结一下。个人理解，如果有错误的地方还请指出。THX

　　要想理解JavaScript的定时器是如何工作的，先要明白 JavaScript 引擎是单线程的。这个可以理解为 javascript 引擎是一个服务员，它有一个服务的队列，所有的界面元素事件,定时触发器回调，异步请求回调都要在这个任务队列里排队，等待处理。所有任务都是一个最小单位，不会中断处理。这样就可以理解 setTimeout(fun,0) 了，它并不是代表立即执行该代码，除非任务队列为空(事实上，各个浏览器在实际执行这个的时候也是有差异了，比较新的浏览器实际可能是在4ms；老版本的可能更长一点，16ms也是可能的)。而 setTimeout(fun,time) 的意思就是多少时间后将 fun 回调加到这个任务队列中，也就是至少需要time时间才会执行fun。

　　举个例子：

setTimeout(function () {
 console.log(1);
}, 0);
var tem = 0;
for (var i = 1; i < 1000000; i++) {
 tem += i;
};
console.log(2);

显示结果为

代码如下:

2
1

　　就是说，在执行 setTimeout 时，将 function 回调加入了任务队列，但并没有立即执行，因为js引擎还在忙着处理当前的js，而只在这段代码段执行完才去任务列表里取新的任务，所以结果就是先显示 2 后显示 1。

　　setInterval(fun, time)方法是，每隔一定时间将fun添加到队列中，那么问题来，如果fun执行时间比 time 要长的时候怎么办？

　　看一段代码

var num = 0;
var time = setInterval(function () {
 var tem = 0;
 for (var i = 1; i < 99999999; i++) {
 tem += i;
 };
 num ++;
 console.log(num);
}, 100);

setTimeout(function (){
 clearInterval(time);
}, 1000);

　　意思是每隔100ms执行一段代码，在1s中后清除这个定时器。但是结果呢？

　　显示结果为

代码如下:

1
2
3

　　也就是说，事实上，并没有执行到那么多次数。也就是说某些间隔会被跳过，这也就存在多个代码执行的间隔可能会比预期的小。原来在将定时器代码加入队列的时候，如果该定时器的代码实例存在时，该次定时器代码会被跳过。

　　引用一张图片，就很好理解了。

以上所述就是本文的全部内容了，希望大家能够喜欢。

赞 (0)

相关推荐

  • JS中setInterval、setTimeout不能传递带参数的函数的解决方案

    在JS中无论是setTimeout还是setInterval,在使用函数名作为调用句柄时都不能带参数,而在许多场合必须要带参数, 这就需要想方法解决. 一.采用字符串形式:--(缺陷)参数不能被周期性改变 setInterval("foo(id)",1000); 二.匿名函数包装 (推荐) 复制代码 代码如下: window.setInterval(function() { foo (id); }, 1000); 这样就可以周期性执行foo(id)这个函数,而且把变量id传递进去: 三

  • setTimeout和setInterval的深入理解

    大概半年前发表过一篇关于setTimeout和setInterval的文章,但是现在回去仔细一看发现其实存在很多不足以及错误.事实上,setTimeout和setInterval并没有我们字面上理解的那么简单.要真正掌握并理解这两个方法,还得从javascript的单线程机制说起. [开门见山]setTimeout和setInterval是如何工作的呢? 我们知道,js是单线程执行的.所以其实setTimeout和setInterval所谓的"异步调用"事实上是通过将代码段插入到代码的

  • setTimeout和setInterval的区别你真的了解吗?

    setTimeout和setInterval的区别你真的了解吗?

    甚至可能会错误的把两个实现定时调用的函数理解成了类似thread一样的东西, 认为会在一个时间片内, 并发的执行调用的函数, 似乎很好很强大, 但其实并不是如此, 实际的情况是javascript都是以单线程的方式运行于浏览器的javascript引擎中的, setTimeout和setInterval的作用只是把你要执行的代码在你设定的一个时间点插入js引擎维护的一个代码队列中, 插入代码队列并不意味着你的代码就会立马执行的,理解这一点很重要. 而且setTimeout和setInterval

  • setInterval和setTimeout停止的方法

    先来了解 setInterval : 1,HTML DOM setInterval() 方法 定义和用法 setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭.由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数. 语法 setInterval(code,millisec[,"lang"]) 参数 描述

  • js中的setInterval和setTimeout使用实例

    setInterval() 定义和用法 setInterval() 方法可按照指定的周期(以毫秒计)来执行函数或表达式.该方法会不停地循环调用函数,直到使用 clearInterval() 明确停止该函数或窗口被关闭.clearInterval() 函数的参数即 setInterval() 返回的 ID 值. 语法 setInterval(code,millisec[,"lang"])code 必需.要调用的函数或要执行的代码串.millisec 必须.周期性执行或调用 code 之间

  • Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)

    Document自带的方法: 循环执行:var timeid = window.setInterval("方法名或方法","延时");window.clearInterval(timeid); 定时执行:var tmid = window.setTimeout("方法名或方法", "延时");window.clearTimeout(tmid); 举例说明: A.当要执行的方法中不需要参数时 复制代码 代码如下: <scr

  • Js中setTimeout()和setInterval() 何时被调用执行的用法

    定义setTimeout()和setInterval()经常被用来处理延时和定时任务.setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,而setInterval()则可以在每隔指定的毫秒数循环调用函数或表达式,直到clearInterval把它清除.从定义上我们可以看到两个函数十分类似,只不过前者执行一次,而后者可以执行多次,两个函数的参数也相同,第一个参数是要执行的code或句柄,第二个是延迟的毫秒数.很简单的定义,使用起来也很简单,但有时候我们的代码并不是按照我们的想象

  • javascript setTimeout和setInterval计时的区别详解

    setTimeout方法是定时程序,也就是在什么时间以后干什么.干完了就拉倒.setInterval方法则是表示间隔一定时间反复执行某操作.如果用setTimeout实现setInerval的功能,就需要在执行的程序中再定时调用自己才行.如果要清除计数器需要 根据使用的方法不同,调用不同的清除方法:例如:(1): 复制代码 代码如下: t=setTimeout('northsnow()',1000);clearTimeout(t);(2):t=setInterval('northsnow()',

  • Jquery中使用setInterval和setTimeout的方法

    方法1. 应用jQuery的扩展可以解决这个问题. 复制代码 代码如下: $(document).ready(function(){$.extend({  show:function(){   alert("ready");  }});setInterval("show()",3000);}); 方法2. 指定定时执行的函数时不要使用引号和括号. 复制代码 代码如下: $(function(){function show(){   alert("ready

  • 关于setInterval、setTimeout在jQuery中的使用注意事项

    以前写定时器的时候,总是习惯直接 setInterval("fn()",2000); 最近碰到个问题,在使用jquery写定时器时,总是会出现fn不存在的错误提示,如下 $(function(){setInterval("fn()",2000);}) 解决方法是去掉引号和括号,采用最原始的方法 $(function(){setInterval(fn,2000);}) 另外一种就是在书写jq的扩展,如下 复制代码 代码如下: $(function(){ $.exten

随机推荐