一、 定时器
window对象有一个方法，叫做
能够使每间隔时间，调用函数一次。我们习惯叫做定时器，按理说叫做“间隔器”。
单词：
演示：
控制台间隔一定时间输出随机数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>间隔</title>
</head>
<body>
<script>
window.setInterval(function(){
console.log(Math.random());
},1000)；
</script>
</body>
</html>
间隔时间是以毫秒为单位，1000毫秒就是1秒。
“毫”就是千分之一，
“厘”就是百分之一，
“分”就是十分之一
第一个参数，是一个函数，所以可以把一个匿名函数往里放，更可以用一个有名函数的引用放里面。
function fun(){
console.log(Math.random());
}
window.setInterval(fun,1000);
setInterval() 能够让函数每间隔时间执行。window 对象，可以不写。
定时器没有所谓的start、begin方法，只要setInterval了，定时器就开始运行了。
二、简单运动模型
视觉暂留：把连续相关的画面，连续播放，就是运动了。动画片的基础书角动画了解一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器</title>
<style>
div{
width: 100px;
height: 100px;
background-color: #EE0;
position: absolute;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<div id="box"></div> // 定义一个盒子
<script>
var box=document.getElementById("box"); //获取元素
var nowleft = 100; //定义信号量
function move(){
nowleft += 20; //增加信号量
if(nowleft > 500){
nowleft = 100; //设置运动宽度100~500
}
box.style.left=nowleft+"px"; //改变位置
}
setInterval(move,100); //定时器间隔100ms
</script>
</body>
</html>
间隔时间是20毫秒，那么1秒中执行函数50次。也就是说，这个动画是每秒50帧，50 fps。
那么现在我们来研究一个事儿，如果让这个盒子跑得更快？（-1最快）
上面的案例中，数值20间隔时间，这个数字越小运动越快；
数值10叫做步长，每一步的变化量，这个数字越大运动越快。
我们就有一个感觉，JavaScript描述动画，描述的是每一步的改变，并不是直接描述终点。
三、定时器的停止
<style type="text/css">
div{
width: 80px;
height: 80px;
background-color: gold;
position: absolute;
top: 111px;
left: 111px;
}
</style>
</head>
<body>
<input type="button" value="开始"/>
<input type="button" value="暂停"/>
<div id="box"></div>
<script type="text/javascript">
//得到盒子和按钮
var oDiv = document.getElementById("box");
var startBtn = document.getElementsByTagName("input")[0];
var pauseBtn = document.getElementsByTagName("input")[1];
//信号量
var nowleft = 111;
var timer; //存放定时器的引用的下面有引用必须全局变量
//监听开始按钮
startBtn.onclick = function(){
//设表先关
clearInterval(timer);
//设置定时器
timer = setInterval(function(){
nowleft += 2;
oDiv.style.left = nowleft + "px";
}, 20);
}
//监听停止按钮
pauseBtn.onclick = function(){
//清除定时器
clearInterval(timer);
}
</script>
setInterval 的时候，要给这个定时器一个变量引用，停止的时候只需要clearInterval(timer);
我们的开始按钮是：
startBtn.onclick = function(){
//设置定时器
timer = setInterval(function(){
nowleft += 2;
oDiv.style.left = nowleft + "px";
}, 20);
}
这个按钮持续点击，盒子运动越来越快。这是因为每次点击，盒子身上就有更多的定时器在作用。
解决办法，就是四个字的口诀“设表先关”。
startBtn.onclick = function(){
//设表先关
clearInterval(timer);
//设置定时器
timer = setInterval(function(){
nowleft += 2;
oDiv.style.left = nowleft + "px";
}, 20);
}
还要注意一个事情：当盒子到终点，自己停止。比如起点是100，终点我们想要600自动停止：
下面的方法是错误的：
var timer = setInterval(function(){
if(nowleft < 600){
nowleft += 13;
oDiv.style.left = nowleft + "px";
}else{
clearInterval(timer);
}
},200);
初始值是100，所以盒子的运动轨迹就是
100、113、126……594、607停表
所以盒子停下来的位置，不是我们想要的600，而是607
所以解决办法，就是验收、拉回终点、停表：“拉终停表”
var timer = setInterval(function(){
nowleft += 7;
if(nowleft > 600){
nowleft = 600;
clearInterval(timer);
}
oDiv.style.left = nowleft + "px";
console.log(nowleft);
},20);
