五、（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. setTimeoutfunction foo() {console.log("-------foo被调用------");}// foo()setTimeout(foo, 3000)// 2. setIntervalfunction 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. setTimeoutfunction foo() {console.log("-------foo被调用------");}var timeoutID = setTimeout(foo, 3000)var timeoutBtn = document.querySelector(".out")timeoutBtn.onclick = function () {// 取消调度clearTimeout(timeoutID)}// 2. setIntervalfunction 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. setTimeoutfunction 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. setIntervalfunction bar() {console.log("--------bar被调用------");}var intervalID = setInterval(bar, 3000)var intervalBtn = document.querySelector(".interval")intervalBtn.onclick = function () {clearInterval(intervalID)}</script></body></html>