js--定时器的使用

定时调用setInterval

--可以将一个函数每隔一段时间执行一次

setInterval（参数1，参数2） 

参数1 ----回调函数，该函数每隔一段时间就会执行一次

参数2 ----每次调用执行的时间，单位是毫秒

例子：数字开启跳动

<p id="num">1<p/>

var num =document.getElementById("num");
			var couter = 1 ; 
			 setInterval(function(){
			num.innerHTML = couter++;
			},500);

如上所示，p标签里面的数字就会每隔500毫秒（也就是0.5秒）执行一次，从1开始跳动

但是，因为couter一直出于自增，所以这个定时器函数会一直停不下来......从1到正无穷~

在日常开发中，我们想要把定时器关闭，应该怎么做呢？

使用clearInterval()

clearInterval()

clearInterval（参数）可以用来关闭一个定时器；

而这里面的参数写的又应该是什么呢？

从上面的例子中，setInterval（）可以拥有一个返回值，作为这个定时器的标识（timer）

我们将上面的例子进行改进，在setInterval（）函数的前面添加一个标识timer

var num =document.getElementById("num");
			var couter = 1 ; 
			var timer =  setInterval(function(){
			num.innerHTML = couter++;
			},500);

当我们想当数字跳到20的时候，就不再变化的时候，可以这样写

var num =document.getElementById("num");
			var couter = 1 ; 
			var timer =  setInterval(function(){
				num.innerHTML = couter++;
				//alert(num.innerHTML);
				if(couter == 11){
					clearInterval(timer);
				}
			},500);

注意clearInterval（timer）这句代码的意思就是：把timer对应的定时器关掉。

设置timer标识的好处是，一个是当setInterval（）想要关闭的时候，cleanInterval（）可以识别出是哪个定时器想要关闭。

//定义多个定时器
var timer1 =  setInterval(function(){....},500);
var timer2 =  setInterval(function(){....},400);
var timer3 =  setInterval(function(){....},1000);
.....

//关闭定时器
cleanInterval(timer1);
cleanInterval(timer2);
cleanInterval(timer3);
.....

setTimeout()延时调用

setTimeout（参数1，参数2）

参数1 --- 调用的函数

参数2 --- 多少秒后执行的时间，单位为毫秒

setTimeout（function(){....}，1000）

setTimeout(function(){
 alert("hello js");
},2000)

//两秒后执行alert函数 并且只执行一次，就不会再执行

setInterval(function(){...}，参数2)和setTimeout(function(){...}，参数2)

共同点：

都是定时器调用，且调用的都是函数。

不同点：

setInterval()是每隔一段时间之后执行一次 且有setInterout来关闭。可以执行N次

setTimeout()是每隔一段时间之后执行一次，没有对应的关闭，执行一次就没了。只能执行1次

当然，setTimeout也有一种特殊写法，可以使它和setInterval()一样执行很多次

function fun(){
    alert("hello,js");
    setTimeout(fun(),1000);//不断的调用函数fun，则形成了和setInterval一样的执行很多次
}
fun();

但是这样写会让fun函数一直执行没有停止，而且setTimeout没有像setInterval那样子有setInterout来关闭。（setTimeout孤军奋战）；

这个时候要想来关闭setTimeout只能靠一些循环语句来限定它什么时候执行 

function fun(){
    var i=0;
    if(i<20){
    i++;
    alert("hello,js");
    setTimeout(fun(),1000);//不断的调用函数fun，则形成了和setInterval一样的执行很多次
    }
}
fun();

这样子的话setTimeout就可以有限制条件而开启或关闭啦~

总结：所以有时候setIntveral和setTimeout是可以相互代替的