五、（JS）window中的定时器
一、为什么叫做window中的定时器
我们在全局中会用到一些函数，比如说alert函数，prompt函数，setTimeout等等
我们有在这里定义过这些函数吗？很明显没有。可见我们这些函数都是来自于window。
所以还可以写成window.setTimeout。这就能解释为什么叫做window中的定时器。
二、window中的定时器用途
平常我们定义一个函数，通过foo()调用的时候，这函数是不是会立即执行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function foo() {
console.log("-------foo------");
}
foo()
</script>
</body>
</html>
但是有时候我们并不想立即执行一个函数，而是等待特定一段时间之后再执行，我们称之为“计划调用（scheduling a call）”。
三、setTimeout：允许我们将函数推迟到一段时间间隔以后再执行。
我们直接写代码，通过setTimeout需要传入2个参数，一个是函数的引用，一个是时间（毫秒）
，下面的例子就是计划3秒过后调用foo函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function foo() {
console.log("-------foo------");
}
// foo()
setTimeout(foo, 3000)
</script>
</body>
</html>四、setInterval：允许我们重复运行一个函数，从一段时间间隔之后开始运行，之后以该时间间隔连续重复运行该函数。
setTimeout(foo,3000)：三秒后执行一次foo函数（只会执行一次函数）
setInterval(bar,3000)：每过三秒执行一次bar函数（固定间隔时间重复调用函数）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1. setTimeout
function foo() {
console.log("-------foo被调用------");
}
// foo()
setTimeout(foo, 3000)
// 2. setInterval
function bar() {
console.log("--------bar被调用------");
}
setInterval(bar, 3000)
</script>
</body>
</html>
五、取消对应的定时器方法
-
clearTimeout：取消setTimeout的定时器；
-
setTimeout在调用时会返回一个“定时器标识符（time identifier）”，我们可以使用它来取消执行。
-
-
clearInterval： 取消setInterval的定时器；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button class="out">取消setTimeout定时器</button>
<button class="interval">取消setInterval定时器</button>
<script>
// 1. setTimeout
function foo() {
console.log("-------foo被调用------");
}
var timeoutID = setTimeout(foo, 3000)
var timeoutBtn = document.querySelector(".out")
timeoutBtn.onclick = function () {
// 取消调度
clearTimeout(timeoutID)
}
// 2. setInterval
function bar() {
console.log("--------bar被调用------");
}
var intervalID = setInterval(bar, 3000)
var intervalBtn = document.querySelector(".interval")
intervalBtn.onclick = function () {
clearInterval(intervalID)
}
</script>
</body>
</html>五、补充
5.1 定时器还能传入额外参数
我们可以在调用定时器的时候传入一些参数（"liudehua", 18,1.88），这个foo函数可以接受定时器传进来的参数。（不常用）
function foo(name,age,height) {
console.log("-------foo被调用------");
}
var timeoutID = setTimeout(foo, 3000, "liudehua", 18,1.88)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button class="out">取消setTimeout定时器</button>
<button class="interval">取消setInterval定时器</button>
<script>
// 1. setTimeout
function foo(name,age,height) {
console.log("-------foo被调用------");
}
var timeoutID = setTimeout(foo, 3000, "liudehua", 18,1.88)
var timeoutBtn = document.querySelector(".out")
timeoutBtn.onclick = function () {
// 取消调度
clearTimeout(timeoutID)
}
// 2. setInterval
function bar() {
console.log("--------bar被调用------");
}
var intervalID = setInterval(bar, 3000)
var intervalBtn = document.querySelector(".interval")
intervalBtn.onclick = function () {
clearInterval(intervalID)
}
</script>
</body>
</html>