介绍
有时我们并不想立即执行一个函数，而是等待特定一段时间之后再执行，我们称之为“计划调用（scheduling a call）” 。
◼ 目前有两种方式可以实现：
setTimeout 允许我们将函数推迟到一段时间间隔之后再执行。
setInterval 允许我们重复运行一个函数，从一段时间间隔之后开始运行，之后以该时间间隔连续重复运行该函数。
◼ 并且通常情况下有提供对应的取消方法：
clearTimeout：取消setTimeout的定时器；
clearInterval：取消setInterval的定时器；
◼ 大多数运行环境都有内置的调度程序，并且提供了这些方法：
目前来讲， 所有浏览器以及 Node.js 都支持这两个方法；
所以我们后续学习Node的时候，也可以在Node中使用它们；
语法
func|code：想要执行的函数或代码字符串。
➢ 一般传入的都是函数，由于某些历史原因，支持传入代码字符串，但是不建议这样做；
delay：执行前的延时，以毫秒为单位（1000 毫秒 = 1 秒），默认值是 0；
arg1， arg2…：要传入被执行函数（或代码字符串）的参数列表；
◼ clearTimeout方法：
setTimeout 在调用时会返回一个“定时器标识符（timer identifier）” ，我们可以通过接收这个返回的数字来取消执行。
clearTimeout方法是一样的。
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.img {
transition: all 3s ease-out;
height: 500px;
}
</style>
</head>
<body>
<img src="任意一个图片的地址" alt="" class="img">
<button class="btn">
取消定时器
</button>
<script>
var imgEl = document.querySelector(".img")
var foo = setTimeout(function () {
imgEl.style.height = 0;
}, 3000)
var btnEl = document.querySelector(".btn")
btnEl.onclick = function () {
clearTimeout(foo)
alert("已经取消，不信你看")
}
</script>
</body>
</html>
补充：css transition属性
transition属性可以被指定为一个或多个 CSS 属性的过渡效果，多个属性之间用逗号进行分隔。
- transition: 规定要过渡的属性。
- all: 表示对所有属性进行过渡，也就是在元素任何属性发生变化时都应用过渡效果。
- 1s: 过渡的持续时间，这里是1秒。表示在1秒的时间内完成属性变化。
- ease-out: 过渡的速度曲线，这里是“ease-out”表示先快后慢的变化，也就是在过渡开始时变化较快，然后逐渐减缓。
