HTML——js设置计时器和清除计时器的方法

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 timefunction 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 = 0function 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()这个括号里写这个变量就可以清除掉了。

纸上来得终觉浅，绝知此事要躬行，自己试一试吧。