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>
