珠峰培训

javascript中的定时器

作者:tx

2016-09-03 22:16:58

286

定时器的种类

//启动或者设置一个定时器是启动一个了一个任务队列,就相当于是一队排队等待执行的任务,当时间到的时候执行。
window.setTimeout(fn,100); //100ms之后执行一次fn函数
window.setInterval(fn,100); //每100ms之后就执行一次fn

定时器的返回值

var timer1 =
        window.setTimeout(function (){},1000);
var timer2 = window.setInterval(function (){},1000);
console.log(timer1); //1 这是当前页面中的第一个定时器
console.log(timer2); //2 这是当前页面中的第二个定时器

清除定时器

//timer1和timer2都是数字
//清除一个定时器就是把这个定时器里的排队等待执行的任务取消
window.clearTimeout(timer1); //清除timer1代表的定时器
window.clearInterval(timer2); //清除timer2代表的定时器
window.clearTimeout(1); //也可以清除第一个定时器,用setTimeout设置的定时器需要用setTimeout来清除
window.clearInterval(2); //也可以清楚第二个定时器,用setInterval设置的定时器需要用setInterval来清除
timer1 = null;
timer2 = null; //这样只是timer2这个变量不再代表那个定时器了,并不是清除定时器里的任务队列

定时器是异步的

console.log(2); 
window.setTimeout(function (){
console.log(1);
},10);
console.log(3);
//打印的顺序是 2,3,1 这个1是在3的后面打印的。就是定时器的第二个参数设置为0.所以定时器是不会阻塞代码运行的。定时器会在代码执行之后才去执行定时器函数中的代码
window.setTimeout(function (){
console.log(0); //这个0永远也不会打印了,因为下面的循环是个死循环
});
while(true){
console.log(1);
}

如果用setTimeout模拟setInterval

function move(){
console.log(1);
}
window.setInterval(move,1000); //间隔1s就会打印一个1,如果使用setTimeout达到这个效果呢?

function _move(){
console.log(1);
window.setTimeout(_move,1000);
}
_move(); //这样就可以达到相同的效果了,执行_move函数的时候,在代码运行到最后一个行就会新启动一个定时器,而这个定时器就是1s之后又执行自己。这样页面内会在每1s都有一个新的定时器。

定时器使用较多,比如:在电商网站经常会见到倒计时抢购。就是每间隔1s中更改倒计时盒子内的html。比如:js动画就是在非常小的时间间隔内完成位置或者宽度或者透明度等改变,都会用到定时器。
学习定时器应该注意:
1 定时器不会阻塞代码运行属于异步
2 定时器是有返回值的,是一个数字代表的是我是第几个定时器
3 清除定时器只是清除了定时器代表的任列队列内的任务取消,定时器其实还在
4 使用setTimeout设置需要用clearTimeout清除 setIntetval要用clearInterval清除