前端研习录(31)——JavaScript 定时器讲解及示例分析
版权声明
- 本文原创作者:清风不渡
- 博客地址:https://blog.csdn.net/WXKKang
重拾前端记忆,记录学习笔记,现在进入JavaScript 定时器部分
一、定时器
定时器(timer)是指JavaScript提供定时执行代码的功能,主要由setTimeout()和setInterval()这两个函数来完成,他们向任务队列添加定时任务
1、setTimeout()
setTimeout()函数用来指定某个函数或某段代码,在多少毫秒之后执行。它返回一个整数(表示该定时器的编号),以后可以用来取消这个定时器,语法如下:
var timerId = setTimeout(func|code , delay);
setTimeout()函数接受两个参数,第一个参数funcjcode是将要推迟执行的函数名或一段代码,第二个参数delay是推迟执行的毫秒数,示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>清风不渡</title>
</head>
<body>
<script>
setTimeout(function log() {
console.log("三秒后打印");
},3000)
</script>
</body>
</html>
结果如下:
注意:
如果回调函数是对象的方法,那么setTimeout使得方法内部的this关键字指向的是【全局环境】,而不是定义时所在的那个对象
示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>清风不渡</title>
</head>
<body>
<script>
var age = 19
var user1 = {
age : 20,
getAge : function () {
console.log("------------普通方法中this永远指向【当前调用者】---------");
console.log(this.age);
}
}
var user2 = {
age : 20,
getAge : function(){
setTimeout(
function(){
console.log("------------setTimeout使得方法内部的this关键字指向的是【全局环境】---------");
console.log(this.age);
}
,3000)
}
}
var user3 = {
age : 20,
getAge : function(){
var thatUser = this
setTimeout(
function(){
console.log("------------使得setTimeout方法内部的this关键字指向的是【当前调用者】---------");
console.log(thatUser.age);
}
,3000)
}
}
user1.getAge();
user2.getAge();
user3.getAge();
</script>
</body>
</html>
结果如下:
可以通过clearTimeout()方法取消定时器,示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>清风不渡</title>
</head>
<body>
<script>
var timer1 = setTimeout(
function(){
console.log("两秒后执行");
}
,2000)
var timer2 = setTimeout(
function(){
console.log("五秒后执行");
}
,5000)
setTimeout(
function(){
clearTimeout(timer1);
clearTimeout(timer2);
}
,3000)
</script>
</body>
</html>
结果如下,只会执行两秒的定时器,因为三秒的时候五秒的定时器没有执行且被取消:
2、setInterval()
setInterval函数的用法与setTimeout完全一致,区别在于setInterval是指定某个任务每隔一段时间就执行一次,也就是无限次的定时执行
通过clearInterval()方法可以取消定时器setInterval
示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>清风不渡</title>
</head>
<body>
<script>
var num = 0;
var Interval = setInterval(
function(){
num++;
console.log(num);
if(num === 5){
clearInterval(Interval);
}
}
,2000);
</script>
</body>
</html>
结果如下,执行到5并且打印完之后定时器被取消不再继续: