1.setTimeout()
setTimeout函数，我将其称之为延时器，顾名思义就是，多少秒之后执行某个函数或代码段，只执行一次。
例1.在2秒之后执行代码段：console.log(2)
setTimeout('console.log(2)',2000);
例2.在1秒之后执行函数func
setTimeout(function(){
for(var i=0;i<10;i++){
console.log(i++);
}
},1000)
2.setInterval()
setInterval函数，多少秒之后执行某个函数或代码段，并无限次定时执行。
例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(),但是两者有区别。
时间： 1------2------ 3------4------5
setTimeout ：1...------2...------3...------4...------5
setInterval： 1...---2...---3...---4...---5
注： ------表示一秒的时间间隔
...------表示函数或代码段执行的时间加一秒的时间间隔，即总时超过一秒
...---表示函数或代码段执行的时间加一秒剩余的时间，即总时共加起来等于一秒
二者实现过程及结果对比
//用于耗时，在本机的执行时间大概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();
从两者结果对比发现，相同时间内setInterval执行次数比setTimeout执行的次数要多。
两者实现结果对比.png
在setInterval中，如果函数或代码段执行的时间大于设置的间隔时间，则执行的模式为：
时间: 1------2------3------4------5
setInterval：1..........2..........3..........4..........5
即，函数或代码段在执行完成后又立即执行下一次
var i=1;
setInterval(function(){
alert(i++);
},2000);
5.setTimeout(f,0)
将定时器内f代码的执行放到队尾去
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);
});
网友评论