1.setTimeout()
setTimeout函數职车，我將其稱之為延時器，顧名思義就是鹊杖，多少秒之后執(zhí)行某個函數或代碼段悴灵，只執(zhí)行一次。
例1.在2秒之后執(zhí)行代碼段：console.log(2)
setTimeout('console.log(2)',2000);
例2.在1秒之后執(zhí)行函數func
setTimeout(function(){
for(var i=0;i<10;i++){
console.log(i++);
}
},1000)
2.setInterval()
setInterval函數骂蓖，多少秒之后執(zhí)行某個函數或代碼段积瞒，并無限次定時執(zhí)行。
例3
setInterval(function(){
var d=new Date();
console.log(d.getHours()+':'+d.getMinutes()+':'+d.getSeconds());
},1000)
3.clearTimeout() , clearInterval()
setTimeout和setInterval函數登下，會返回一個整數值赡鲜，用來表示定時器的編號，將該整數傳入clearTimeout和clearInterval函數庐船，就可以取消對應的定時器银酬。
例4
function f(){
console.log(2);
}
var delayer=setTimeout(f,5000);
var timer=setInterval(f,1000);
clearTimeout(delayer);
clearInterval(timer);
4.用setTimeout()實現setInterval()
function f(){
setTimeout(function(){
var d=new Date();
console.log(d.getMinutes()+':'+d.getSeconds());
f();
},1000);
}
f();
雖然setTimeout()實現了setInterval(),但是兩者有區(qū)別。
時間： 1------2------ 3------4------5
setTimeout ：1...------2...------3...------4...------5
setInterval： 1...---2...---3...---4...---5
注： ------表示一秒的時間間隔
...------表示函數或代碼段執(zhí)行的時間加一秒的時間間隔筐钟，即總時超過一秒
...---表示函數或代碼段執(zhí)行的時間加一秒剩余的時間揩瞪，即總時共加起來等于一秒
二者實現過程及結果對比
//用于耗時，在本機的執(zhí)行時間大概0.5秒
function usetime(){
for(var i=0;i<500;i++){
console.log('');
}
}
//setInterval()函數
var k=0;
setInterval(function(){
usetime();
console.log('setInterval'+k++);
},1000);
//setTimeout()實現setInterval()函數
var j=0;
function timer(){
setTimeout(function(){
usetime();
console.log('setTimeout'+j++);
timer();
},1000);
}
timer();
從兩者結果對比發(fā)現篓冲，相同時間內setInterval執(zhí)行次數比setTimeout執(zhí)行的次數要多李破。
兩者實現結果對比.png
在setInterval中，如果函數或代碼段執(zhí)行的時間大于設置的間隔時間壹将，則執(zhí)行的模式為：
時間: 1------2------3------4------5
setInterval：1..........2..........3..........4..........5
即嗤攻，函數或代碼段在執(zhí)行完成后又立即執(zhí)行下一次
var i=1;
setInterval(function(){
alert(i++);
},2000);
5.setTimeout(f,0)
將定時器內f代碼的執(zhí)行放到隊尾去
var a=1;
setTimeout(function(){
console.log('before'+a);
a=2;
console.log('after'+a);
},0);
a=3;
console.log(a);
<html>
<input type="text" id="shi">
</html>
<script>
var shi=document.getElementById('shi');
shi.addEventListener("keydown",function(){
var me=this;
setTimeout(function(){
me.value=me.value.toUpperCase();
},0);
});
