JS定时器分类介绍

JS定时器分两种

定时器（setTimeout延迟性一次定时器、setInterval反复性定时器）

 

【案例】

（1）反复性定时器，常用来刷新表单，对于一些表单的假实时指定时间刷新同步

<p class="count">0</p>
<script>  
	$(function(){
	    //反复性定时器,1秒发送一次
	      setInterval('alert()',1000);
	})
	//ajax请求方法
	function alert(){
	    //发送ajax请求
	    $.get("{:U('Stydy/stydy')}", function(data){
		  $('.count').html(Math.random()); 
	    });
	}
</script>

    查看效果：即可发现每一秒发送一次请求~~

                      所以每一秒换一次随机数

 

（2）一次性定时器

还是和上面大致相同，只是换了下方法

将setInterval换成setTimeout，浏览器查看效果即可发现，只发送一次请求

 

（3）循环和停止

使用一个变量 var timer = setInterval(fun,2000);

将setInterval赋值给一个变量，要停止的时候，只需要使用clearInterval(timer);即可停止上面的这个每个两秒循环执行fun的这个函数了。

<script>  
	$(function(){
		var timesRun = 0;
		var interval = setInterval(function(){
			timesRun += 1;
			if(timesRun == 10){
				clearInterval(interval);
			}
			//do whatever here..
			$('.count').html(Math.random());
		}, 1000);
	})
</script> 

 

 

 

 

【总结】

（1）执行次数

        setTimeout(表达式,延时时间)在执行时,是在载入后延迟指定时间后,去执行一次表达式,记住,次数是一次。而setInterval(表达式,交互时间)则不一样,它从载入后,每隔指定的时间就执行一次表达式。所以,完全是不一样的

（2）使用方式

 

       很多人习惯于将setTimeout包含于被执行函数中,然后在函数外再次使用setTimeout来达到定时执行的目的。这样,函数外的setTimeout在执行函数时再次触发setTimeout从而形成周而复始的定时效果。使用的时候各有各的优势，使用setInterval，需要手动的停止tick触发。而使用方法中嵌套setTimeout，可以根据方法内部本身的逻辑不再调用setTimeout就等于停止了触发。其实两个东西完全可以相互模拟，具体使用那个，看当时的需要而定了。

 

分享下其他人的见解：

相同点：两个方法都是先触发间隔时间，再触发回调函数

（区别）

1.setInterval每隔指定的时间就执行一次表达式，若不停止会一直执行下去

而setTimeout在执行时,是在载入后延迟指定时间后,去执行一次表达式,次数仅为一次

2.将setTimeout包含于被执行函数中,然后在函数外再次使用setTimeout来达到定时执行的目的 

这样,函数外的setTimeout在执行函数时再次触发setTimeout从而形成周而复始的定时效果，但是

这样每次时间就相当于延迟时间+函数执行时间，时间越久，误差越大；

 

而setInterval是间隔时间去执行函数，并不会产生误差，setInterval适用于显示时间，精确度高

 

 

 

 

 

 

 

 

 

.