6.JavaScript定时器

详情的说明见 runoob---->JavaScript 计时事件

方法	说明	取消方法
setInterval(function,time)	间隔time时间执行一次，没有取消则会按time周期一直执行	clearInterval(timer)
setTimeout(function,time)	间隔time时间运行一次，执行完毕则关闭定时器	clearTimeout(timer)

值得一提的是

1. 在当前网页中，定时函数都会返回一个定时器编号，编号都是从1开始。
2. clearTimeout() 和 clearInterval() 可以接受任何参数，即使这个定时器不存在，也不会报错。

在 setInterval() 方法下：

假设我之前已将创建两个定时器，为 t1,t2 ,且都在重复运行。当达到某一条件，或者人为进行关闭 t1 或 t2 ，同时再创建定时器t3，打印三个定时器编号：

t1:1   t2:2    t3:3

得到如上信息，得出在当前页面中，只要网页没有被刷新，定时器即便取消了，定时器编号，都是一致累加，不存在定时器编号插入或者替换。

在 setTimeout() 中一样（不论执行完毕后取消，还是未执行取消）。

实验

setInterval()：

• html

<h1 id="hh1" style="text-align: center;">0</h1>

• script

var count=0;
var hh1=document.getElementById("hh1");
var t3=0;
var t1=setInterval(function () {
    ++count;
    hh1.innerHTML=count;
    if (count==3){				//等于3时关闭定时器1，打开定时器3
        clearInterval(t1);
        t3=setInterval(function () {
            ++count;
            hh1.innerHTML=count;
        },1000);
    }
},1000);
console.log("t1:"+t1);


var t2=setInterval(function () {
    if (count==4){				//等于4时打印定时器编号信息
        console.log("t1:"+t1+"   t2:"+t2+"    t3:"+t3);
    }
},1000);
console.log("t2:"+t2);

效果图：

1. 未到3之前
   
2. 到达4时