定義
js中內(nèi)置的一個(gè)方法，每隔一段時(shí)間或者延遲一段時(shí)間去執(zhí)行一段指定的代碼
分類
-
重復(fù)執(zhí)行定時(shí)器
setInterval();
作用：每隔一段時(shí)間去重復(fù)執(zhí)行指定的函數(shù)（會(huì)執(zhí)行函數(shù)多次）
-
延遲執(zhí)行定時(shí)器
setTimeout();
作用：延遲一段時(shí)間去執(zhí)行指定的函數(shù)（只執(zhí)行函數(shù)一次）
語法
- 有兩個(gè)參數(shù)盾计，兩個(gè)參數(shù)用“ , ”隔開
setInterval(function(),時(shí)間);
setTimeout(function(),時(shí)間);
- 前面一個(gè)參數(shù)為需要重復(fù)執(zhí)行（延遲執(zhí)行）的代碼
- 可以直接將代碼寫在函數(shù)內(nèi)
var box=document.getElementById('box'); var i=0; box.onclick=function(){ setInterval(function(){ i++; box.innerHTML=i; },1000); };- 也可以將函數(shù)在代碼外聲明后進(jìn)行調(diào)用
var box=document.getElementById('box');
var i=0;
box.onclick=function(){
setInterval(change,1000);
};
function change(){
i++;
box.innerHTML=i;
};
注意：調(diào)用函數(shù)時(shí)碍庵，直接寫上函數(shù)名字即可入愧，不用加()踩身，若帶上()就為函數(shù)返回值了
- 后面一個(gè)參數(shù)為重復(fù)執(zhí)行（延遲執(zhí)行）代碼的間隔時(shí)間
注意：
1.時(shí)間單位為ms
2.若未設(shè)置時(shí)間參數(shù)较木，則默認(rèn)為10ms（來自于官方文檔）
調(diào)用
為了便于定時(shí)器的清除侵状，一般是在函數(shù)外聲明一個(gè)變量牺勾，然后調(diào)用時(shí)將定時(shí)器賦值給該變量
var timer;
btn.onclick=function(){
timer=setInterval();
};
定時(shí)器中的this
-
this的指向
定時(shí)器是window中的一個(gè)方法正罢，可以寫成window.setInterval()或者window.setTimeout()，故定時(shí)器中的this指向的是window
window.onload=function(){
var box=document.getElementById('box');
var i=0;
console.log(this); //window 這里是由window調(diào)用的函數(shù)驻民，所以這里this為window
box.onclick=function(){
console.log(this); //box 這里是由box點(diǎn)擊以后調(diào)用的函數(shù)翻具，所以這里this為box
setInterval(function(){
console.log(this); //window
i++;
box.innerHTML=i;
},1000);
};
};
-
使用上級(jí)函數(shù)中的this
在調(diào)用定時(shí)器的函數(shù)里聲明一個(gè)變量a，然后將該函數(shù)里的this賦值給a回还，定時(shí)器中的函數(shù)如果需要運(yùn)用到調(diào)用它的函數(shù)中的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; //在定時(shí)器所要觸發(fā)的函數(shù)中使用變量a，由于在自己的作用域里尋找不到柠硕，就會(huì)去它的上級(jí)里尋找a工禾，找到a，那就是找到了上級(jí)函數(shù)的this
},1000);
};
};
定時(shí)器返回值（定時(shí)器的編號(hào)）
定時(shí)器的返回值是數(shù)字蝗柔，代表是第幾個(gè)定時(shí)器
注意：不同瀏覽器的返回值不同
var n=0;
function add(){
n++;
};
console.log(setInterval(add,1000)); //在控制欄輸出定時(shí)器的返回值
清除定時(shí)器
-
原理
利用定時(shí)器的返回值去清除定時(shí)器
注意：
1.不同瀏覽器的定時(shí)器的返回值不同闻葵，存在兼容性問題，故不能直接用返回值去清除癣丧，需要將返回值存在變量里槽畔，然后用變量去清除定時(shí)器
2.定時(shí)器即使清除了，其返回值也不會(huì)清除胁编，之后設(shè)置的定時(shí)器的返回值也會(huì)在其返回值的基礎(chǔ)上繼續(xù)向后排
-
方法
clearInterval(定時(shí)器的返回值); //清除重復(fù)執(zhí)行定時(shí)器
clearTimeout(定時(shí)器的返回值); //清除延遲執(zhí)行定時(shí)器
定時(shí)器的清除方法可以互用
clearInterval()可以用來清除setTimeout()
clearTimeout()可以用來清除setInterval()
只是一個(gè)小拓展竟痰，在清除定時(shí)器的時(shí)候還請(qǐng)一一對(duì)應(yīng)
-
示例
- 直接使用返回值（不推薦，存在兼容性問題）
var n=0;
function add(){
n++;
console.log(n);
if(n==8){
clearInterval(1); //在chrome中掏呼，這個(gè)定時(shí)器的返回值為1，直接寫入返回值就可以清除铅檩，但不推薦這么做憎夷，因?yàn)榇嬖诩嫒菪詥栴}
}
};
setInterval(add,1000);
- 將返回值存在變量中（推薦做法）
var n=0;
function add(){
n++;
console.log(n);
if(n==8){
clearInterval(Timer);
}
}
var Timer=setInterval(add,1000);
問題：
這里的定時(shí)器是在聲明的變量里，是如何調(diào)用的昧旨？
這里是將定時(shí)器的返回值賦值給了變量Timer拾给，但是如果需要去獲取返回值，那么函數(shù)就需要被調(diào)用兔沃，所以這里的函數(shù)是被調(diào)用了的
