js中的计时器
1、setTimeout计时器
setTimeout(要执行的方法,时间单位 (毫秒))
这里的执行方法通常是匿名函数(函数=方法)
setTimeout(function () {
console.log('我是setTimeout计时器')
}, 2000)
setTimeout()
意思:多少秒后执行函数,这里的意思就是:2秒后将在控制台打印“我是setTimeout计时器”
2、setInterval计时器
setInterval(要执行的方法,时间单位 (毫秒))
这里的执行方法通常是箭头函数
setInterval(() => {
console.log('我是setInterval计时器')
}, 2000);
setInterval()
意思:每隔多少秒执行函数,这里的意思就是:每隔2秒,将在控制台打印“我是setInterval计时器”
两者区别:setTimeout里的函数只会被执行一次,而setInterval里的函数会每隔多少秒执行一次。
需要注意:两者括号里面的第二个值,单位都是毫秒,1s=1000ms(1秒=1000毫秒),其他时间以此类推。
如何中止计时器(清除计时器)呢?
clearInterval()
clearInterval(清除哪一个计时器)
<!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>Document</title>
</head>
<button onclick="myClick()">点击开始</button>
<button onclick="mystop()">点击停止</button>
<button onclick="myinterval()">点击开始interval</button>
<button onclick="mystopinterval()">点击停止interval</button>
<body>
<script>
// 计时器
// setTimeout(要执行的方法,时间单位 毫秒)
let time
function myClick() {
// setTimeout(myFun(), 3000)
time = setTimeout(function () {
console.log('我也会执行')
}, 2000)
}
// function myFun() {
// return function () {
// console.log('我是返回的函数')
// }
// }
function mystop() {
// clearTimeout(哪一个timeout)
clearTimeout(time)
}
//清除setInterval计时器
let num = 0
function sum() {
console.log(num++)
}
let myinter //声明一个变量的去装setInterval()
function myinterval() {
myinter = setInterval(() => {
sum()
}, 2000);
//每隔2秒sum()函数会被执行 即每隔2秒会num++,执行的尽头通常是无止境的(不关闭浏览器,除了清除计时器)
}
function mystopinterval() {
clearInterval(myinter)
}
</script>
</body>
</html>
为啥要声明一个变量去装setInterval() (下面的代码块1),而不直接(下面的代码块2)?
代码块1:
//清除setInterval计时器
let num = 0
function sum() {
console.log(num++)
}
let myinter //声明一个变量的去装setInterval()
function myinterval() {
myinter = setInterval(() => {
sum()
}, 2000);
//每隔2秒sum()函数会被执行 即每隔2秒会num++,执行的尽头通常是无止境的(不关闭浏览器,除了清除计时器)
}
function mystopinterval() {
clearInterval(myinter)
}
代码块2:
//清除setInterval计时器
let num = 0
function sum() {
console.log(num++)
}
function myinterval() {
setInterval(() => {
sum()
}, 2000);
//每隔2秒sum()函数会被执行 即每隔2秒会num++,执行的尽头通常是无止境的(不关闭浏览器,除了清除计时器)
}
function mystopinterval() {
clearInterval( setInterval(() => { sum()}, 2000);)
}
函数是引用数据类型,引用数据类型在栈内存里(用于存放地址,用的时候去取),而实际函数体是在堆内存里,就是实际存放的东西。
而代码块2只是清除了栈内存里的,而没有清除堆内存里的
所以需要一个变量去装计时器的东西,清除时候只需在clearInterval()
这个括号里写这个变量就可以清除掉了。
纸上来得终觉浅,绝知此事要躬行,自己试一试吧。