定义
js中内置的一个方法，每隔一段时间或者延迟一段时间去执行一段指定的代码
分类
-
重复执行定时器
setInterval();
作用：每隔一段时间去重复执行指定的函数（会执行函数多次）
-
延迟执行定时器
setTimeout();
作用：延迟一段时间去执行指定的函数（只执行函数一次）
语法
- 有两个参数，两个参数用“ , ”隔开
setInterval(function(),时间);
setTimeout(function(),时间);
- 前面一个参数为需要重复执行（延迟执行）的代码
- 可以直接将代码写在函数内
var box=document.getElementById('box'); var i=0; box.onclick=function(){ setInterval(function(){ i++; box.innerHTML=i; },1000); };- 也可以将函数在代码外声明后进行调用
var box=document.getElementById('box');
var i=0;
box.onclick=function(){
setInterval(change,1000);
};
function change(){
i++;
box.innerHTML=i;
};
注意：调用函数时，直接写上函数名字即可，不用加()，若带上()就为函数返回值了
- 后面一个参数为重复执行（延迟执行）代码的间隔时间
注意：
1.时间单位为ms
2.若未设置时间参数，则默认为10ms（来自于官方文档）
调用
为了便于定时器的清除，一般是在函数外声明一个变量，然后调用时将定时器赋值给该变量
var timer;
btn.onclick=function(){
timer=setInterval();
};
定时器中的this
-
this的指向
定时器是window中的一个方法，可以写成window.setInterval()或者window.setTimeout()，故定时器中的this指向的是window
window.onload=function(){
var box=document.getElementById('box');
var i=0;
console.log(this); //window 这里是由window调用的函数，所以这里this为window
box.onclick=function(){
console.log(this); //box 这里是由box点击以后调用的函数，所以这里this为box
setInterval(function(){
console.log(this); //window
i++;
box.innerHTML=i;
},1000);
};
};
-
使用上级函数中的this
在调用定时器的函数里声明一个变量a，然后将该函数里的this赋值给a，定时器中的函数如果需要运用到调用它的函数中的this，用a来代替
window.onload=function(){
var box=document.getElementById('box');
var i=0;
box.onclick=function(){
var a=this; //声明变量a
setInterval(function(){
i++;
a.innerHTML=i; //在定时器所要触发的函数中使用变量a，由于在自己的作用域里寻找不到，就会去它的上级里寻找a，找到a，那就是找到了上级函数的this
},1000);
};
};
定时器返回值（定时器的编号）
定时器的返回值是数字，代表是第几个定时器
注意：不同浏览器的返回值不同
var n=0;
function add(){
n++;
};
console.log(setInterval(add,1000)); //在控制栏输出定时器的返回值
清除定时器
-
原理
利用定时器的返回值去清除定时器
注意：
1.不同浏览器的定时器的返回值不同，存在兼容性问题，故不能直接用返回值去清除，需要将返回值存在变量里，然后用变量去清除定时器
2.定时器即使清除了，其返回值也不会清除，之后设置的定时器的返回值也会在其返回值的基础上继续向后排
-
方法
clearInterval(定时器的返回值); //清除重复执行定时器
clearTimeout(定时器的返回值); //清除延迟执行定时器
定时器的清除方法可以互用
clearInterval()可以用来清除setTimeout()
clearTimeout()可以用来清除setInterval()
只是一个小拓展，在清除定时器的时候还请一一对应
-
示例
- 直接使用返回值（不推荐，存在兼容性问题）
var n=0;
function add(){
n++;
console.log(n);
if(n==8){
clearInterval(1); //在chrome中，这个定时器的返回值为1，直接写入返回值就可以清除，但不推荐这么做，因为存在兼容性问题
}
};
setInterval(add,1000);
- 将返回值存在变量中（推荐做法）
var n=0;
function add(){
n++;
console.log(n);
if(n==8){
clearInterval(Timer);
}
}
var Timer=setInterval(add,1000);
问题：
这里的定时器是在声明的变量里，是如何调用的？
这里是将定时器的返回值赋值给了变量Timer，但是如果需要去获取返回值，那么函数就需要被调用，所以这里的函数是被调用了的
