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执行的次数要多。
在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);
});