setTimeout和setInterval的各自使用场景

默认的

setTimeout 只执行一次, 清除用clearTimeout

setInterval 每间隔指定的时间, 就执行一次, 清除用clearInterval

但是, setTimeout也可以用来执行 每隔一定时间间隔就执行一次, 方法是在 函数内部使用 "递归"的调用.

foo(); //调用一次foo函数
function foo(){
// 函数主体
// ... 该数据处理的, 执行数据处理;
// ... 该输出的, 就输出
// ... 该显示的, 你显示
// 主体执行完了

setTimeout(foo, 5000); 

}
// 这个方法, 是一种 固定的 套路 用法, 固定的写法.

那么 "递归setTimeout" 和 setInterval 的区别?

• 如果要求 在固定的 精确 间隔时间后, 执行动作, 用setInterval,
• 如果要避免setInterval 在短间隔时间 连续调用 产生的相互干扰, 特别是 每次函数的调用需要繁重的计算以及很长的处 理时间, 这时更容易产生干扰,此时最好用 setTimeout.
• setTimeout不会产生干扰: 因为每次执行foo的时候, 总是先把当前这次foo的 函数主体 工作完成后, 再间隔指定时间后, 才会开始执行下一次foo的动作.实际上执行的只是一个 "函数入口" , 是线性的, 有先后次序的, 所以不会发生干扰. 而setInterval 则是 "并行的"....

jquery中也可以使用js原生代码, 只不过要注意和jquery对象相区分,搞清楚到底是js对象还是jquery对象. jquery中没有 "日期时间" 函数,所以还是用 js 原生的 日期-时间 函数:

// 获取当前的日期和时间
 var datetime/dt= new Date();
 alert(dt)
// datetime 显示的是: 星期 月日年 时间HH:ii:ss GMT+0800

程序代码举例

/*  在setInterval中使用匿名函数. */
<script src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function() {
	var i = 0;
	var timer = setInterval(function(){
		var dt = new Date();
		var month = dt.getMonth()+1;
		alert('现在是: '+ dt.getFullYear()+'年, '+ month +'月, '+dt.getDate()) + "日";
		i++;
		if (i>= 3){
			clearInterval(timer);     // 在setInterval函数内部, 就可以使用clearInterval清除计时器.
		}

	},500);
});
</script>

/*  在setInterval中使用code,delay参数. */
<script type="text/javascript">
$(function() {
	var timer = setInterval(showDate,500);  // 这里千万注意, 参数code, 就直接写函数名, 不要加括号,也不要引号

	var i = 0;       // 这个初始化要放在函数的外面,才能保证只执行3次.
	function showDate(){
		var dt = new Date();
		var month = dt.getMonth()+1;
		alert('现在是: '+ dt.getFullYear()+'年, '+ month +'月, '+dt.getDate() + "日");
		i++;
		if (i>= 3){
			clearInterval(timer);
		}
	}
});

// 使用setTimeout实现多次计时器
// /*===========================================
// * 特别注意的是, var i=0 循环次数控制变量的位置, 放在函数调用前／后,
// * 循环的次数是不同的, 这里如果var i=0 放在showDate()之后, 将会显示4次, 而不是预想的3次
// *===========================================*/

<script type="text/javascript">
$(function() {
	// 先 只 调用一次 "包含" 函数
	var i = 0;
	showDate();

	// 定义showDate, 并在函数内部使用: setTimeout(showDate, delay_microsecond)

	function showDate() {

	/* 函数主体 跟原来的业务处理 相同 */
       	i++;
        var dt = new Date();
        var month = dt.getMonth()+1;
        alert('现在是: '+ dt.getFullYear()+'年, '+ month +'月, '+dt.getDate()) + "日";
        if (i>= 3){
	    return;
        }
	setTimeout(showDate, 500);
    }

});

</script>

**计算机只做你告诉它该做的事情, 但是, 并不会做你想做的事情!**