JS定时器初步实践

效果：数值从0到10来回变化

方法1：用一个定时器实现

var a=0,b;
function change(){
if(a===0)b=1;
if(a===10)b=-1;
console.log(a=a+b);
}
var timer=setInterval(change,200);

方法2：用两个定时器实现

var a=0
var timer1,timer2;
function add(){
a++;
console.log(a);
if(a>=10){
clearInterval(timer1);
timer2=setInterval(sub,200);
}
}
function sub(){
a--;
console.log(a);
if(a<=0){
clearInterval(timer2);
timer1=setInterval(add,200);
}
}
timer1=setInterval(add,200);

----------分割线------------------------

使用定时器需要注意的点：

1. 虽然每次都用clearInterval把timer清掉了，但是每次新的循环还是会使timer的值在原有基础上加1，如要彻底清除可以用timer=null;

2.setTimeout和setInterval都是window对象中的方法，定时器方法会先将回调函数放在一个特殊的队列中，待ECS（执行环境栈）中的函数全部执行完了之后才执行队列中的回调函数。从目前来看会造成几个值得注意的后果：

1）定时器回调函数中的this会默认指向window, 需要注意用bind方法绑定this指向

2）js代码的运行会阻塞DOM树的渲染（只需要在某DOM节点的前面放一段需要几秒钟才能执行完的循环JS代码就能验证这点），但是一旦这段js放在了定时器的回调函数中，则不会再有阻塞效果

3）setTimeout的起始计时时间并不是从我们刷新页面开始计算，而是从执行环境栈中其他任务执行完之后才开始计时