定时器

定时器

JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成。

setTimeout()

setTimeout函数用来指定某个函数或某段代码,在多少毫秒之后执行。它返回一个整数,表示定时器的编号,以后可以用来取消这个定时器。

var timerId = setTimeout(func|code, delay)

上面代码中,setTimeout函数接受两个参数,第一个参数func|code是将要推迟执行的函数名或者一段代码,第二个参数delay是推迟执行的毫秒数。变量timerId保存着定时器的编号值。

console.log(1);
setTimeout('console.log(2)',1000);
console.log(3);

上面代码的输出结果就是1,3,2,因为setTimeout指定第二行语句推迟1000毫秒再执行。

需要注意的是,推迟执行的代码必须以字符串的形式,放入setTimeout,因为引擎内部使用eval函数,将字符串转为代码。如果推迟执行的是函数,则可以直接将函数名,放入setTimeout。一方面eval函数有安全顾虑,另一方面为了便于JavaScript引擎优化代码,setTimeout方法一般总是采用函数名的形式,就像下面这样。

function f(){
  console.log(2);
}

setTimeout(f,1000);

// 或者

setTimeout(function (){console.log(2)},1000);

setInterval()

setInterval函数的用法与setTimeout完全一致,区别仅仅在于setInterval指定某个任务每隔一段时间就执行一次,也就是无限次的定时执行。

  var timer = setInterval(function() {
    console.log(2);
  }, 1000);

上面代码表示每隔1000毫秒就输出一个2,直到用户点击了停止按钮。

clearTimeout(),clearInterval()

setTimeout和setInterval函数,都返回一个表示计数器编号的整数值,将该整数传入clearTimeout和clearInterval函数,就可以取消对应的定时器。

var id1 = setTimeout(f,1000);
var id2 = setInterval(f,1000);

clearTimeout(id1);
clearInterval(id2);

运行机制

setTimeout和setInterval的运行机制是,将指定的代码移出本次执行,等到下一轮 Event Loop 时,再检查是否到了指定时间。如果到了,就执行对应的代码;如果不到,就等到再下一轮 Event Loop 时重新判断。

这意味着,setTimeout和setInterval指定的代码,必须等到本轮 Event Loop 的所有任务都执行完,才会开始执行。由于前面的任务到底需要多少时间执行完,是不确定的,所以没有办法保证,setTimeout和setInterval指定的任务,一定会按照预定时间执行。

setTimeout(someTask, 100);
veryLongTask();

上面代码的setTimeout,指定100毫秒以后运行一个任务。但是,如果后面的veryLongTask函数(同步任务)运行时间非常长,过了100毫秒还无法结束,那么被推迟运行的someTask就只有等着,等到veryLongTask运行结束,才轮到它执行。

下面是setInterval的例子。

setInterval(function () {
  console.log(2);
}, 1000);

sleep(3000);//需要3000毫秒才能执行完成

上面的第一行语句要求每隔1000毫秒,就输出一个2。但是,紧接着的语句需要3000毫秒才能完成,那么setInterval就必须推迟到3000毫秒之后才开始生效。这3000毫秒之内,setInterval不会产生累积效应。

setTimeout(f, 0)指定的任务,最早也要到下一次Event Loop才会执行。请看下面的例子。

setTimeout(function() {
  console.log("Timeout");
}, 0);

function a(x) {
  console.log("a() 开始运行");
  b(x);
  console.log("a() 结束运行");
}

function b(y) {
  console.log("b() 开始运行");
  console.log("传入的值为" + y);
  console.log("b() 结束运行");
}

console.log("当前任务开始");
a(42);
console.log("当前任务结束");

// 当前任务开始
// a() 开始运行
// b() 开始运行
// 传入的值为42
// b() 结束运行
// a() 结束运行
// 当前任务结束
// Timeout

上面代码说明,setTimeout(f, 0)必须要等到当前脚本的所有同步任务结束后才会执行。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏北京马哥教育

Python 3 那些非常规的技巧

对新学习Python的小伙伴来说,既感受到了短代码的开心,也更愿意用到一些简短的Python写法,下面是我使用Python过程总收集的一些技巧,希望对你有所帮...

3467
来自专栏恰同学骚年

C# 中的委托和事件

文中代码在VS2005下通过,由于VS2003(.Net Framework 1.1)不支持隐式的委托变量,所以如果在一个接受委托类型的位置直接赋予方法名,...

712
来自专栏前端黑板报

(转)ES6新特性概览

ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony(和谐之意,显然没有跟上我国的步伐,我们已经进入中国梦版本...

1835
来自专栏华仔的技术笔记

面经之《招聘一个靠谱的iOS》import "CYLBlockExecutor.h"import "CYLBlockExecutor.h"import "CYLNSObject+RunAtDeallo

34810
来自专栏和蔼的张星的图像处理专栏

数据结构栈队列链表树二叉查找树

这学期刚回到所里的时候把c++数据结构看了一遍,基本的数据结构照着视频也敲了一遍,不过那个时候自己对c++的了解只限于一些基本的语法,c++primer也还没有...

1204
来自专栏JetpropelledSnake

在Python中实现单例模式

有些时候你的项目中难免需要一些全局唯一的对象,这些对象大多是一些工具性的东西,在Python中实现单例模式并不是什么难事。以下总结几种方法: 使用类装饰器 ...

2726
来自专栏前端杂货铺

汉字数组排序及如何检测汉字

起因         最近接触了一道有意思的题目,就是单击表格的表头,根据表头的那一栏进行排序。恰好有一栏的数据全部是中文汉字,如果仅仅对于汉字数组使用默认的s...

2723
来自专栏Golang语言社区

第五节:Go语言常量

干货来了!!!为了让更多的小伙伴喜欢Golang、加入Golang之中来,Golang语言社区发起人彬哥联合业界大牛共同推出了Go语言基础、进阶、提高课程,目前...

912
来自专栏同步博客

单例模式

  一种是饿汉式单例,饿汉式单例在单例类被加载时候,就实例化一个对象交给自己的引用;

653
来自专栏张善友的专栏

Disruptor-NET和内存栅栏

Disruptor-NET算法(是一种无锁算法)需要我们自己实现某一种特定的内存操作的语义以保证算法的正确性。这时我们就需要显式的使用一些指令来控制内存操作指令...

1876

扫码关注云+社区