js 定时器

window对象中处理时间和间隔的函数有4个：

• setTimeout()函数、clearTimeout()函数
• setInterval()函数、clearInterval()函数

1.1 延时定时器

setTimeout() ：定义延时定时器，在指定的时间后调用函数。

语法：

• setTimeout(fun,time);
  其中参数 fun ：函数体或函数名 ;time 指定时间，单位为毫秒。其返回值有一个 id, 代表当前的这
  个 setTimeout() 函数。
• clearTimeout(id)：清除延时定时器，取消指定id的setTimeout函数。

示范代码：

setTimeout(function () {
document.write("隔3秒后触发");
}, 3000) //在3秒后输出
setTimeout(fun1, 5000); //在5秒后输出
function fun1() {
document.write("函数名的方式5秒后触发");
}

1.2 间隔型定时器

setInterval() ：定义间隔型定时器 , 在间隔指定的事件后重复调用函数。

语法：

• setInterval(fun1,time)　　                                                                                                      fun：函数体或函数名，time指定的时间，单位为毫秒。会返回一个值id。

• clearInterval(id)：清除间隔型定时器                                                                                        参数id是setInterval()函数返回的值，根据这个值可以停止返回值为idsetInterval()的执行。

示范代码：

var h = setInterval(function () {
document.write("3秒输出一次<br/>");
}, 3000);

注意，JavaScript是单线程的，因此，这个定时函数实际上是通过插入执行队列的方式来实现。

1.3 实例

动态时间案例 1 ：

由于涉及到时间的显示问题，所以要用到日期对象 Date ，还有时间在不停地走，因此需要不断地调用函数，所以要用到Windows 的定时器 setInterval( ) 方法。

<script>
function disptime(){
var today = new Date(); //获得当前时间
var hh = today.getHours(); //获得小时、分钟、秒
var mm = today.getMinutes();
var ss = today.getSeconds();
document.getElementById("myclock").innerHTML=hh+":"+mm+":"+ss;
}
window.setInterval(disptime,1000);
</script>

动态时间案例 2 ：

<!-- 这个div用来显示动态时间 -->
<div id="timeDiv">
<!-- 我们不能给这个div里面写内容,因为时间是不固定,需要通过JS来设置 -->
</div>
<script>
//给页面元素设置文本内容,那么肯定要获取到元素节点,然后通过元素节点.innerText来设置文本内容
//获取到timeDiv元素节点
var timeDiv = document.getElementById("timeDiv");
//这个函数是用来给timeDiv设置字符串
function setTimeStr() {
//获取到系统时间,然后给其设置内容
var time = new Date();
//获取到年月日
var year = time.getFullYear();
var month = time.getMonth()+1;
var date = time.getDate();
//获取时分秒
var hour = time.getHours();
//ampStr用来表示上午或下午
var apmStr = hour >= 12 ? "下午" : "上午";
var minute = time.getMinutes();
var second = time.getSeconds();
timeDiv.innerText = "今天
是:"+year+"年"+getTwo(month)+"月"+getTwo(date)+"日,现在时间是:"+apmStr+" "
+getTwo(hour)+":"+getTwo(minute)+":"+getTwo(second);
}
//让timeDiv里面的内容,每一秒改变一次
setInterval(setTimeStr,1000);
//为了解决第一秒没有显示时间的小bug,可以提前调用一次
setTimeStr();
//月日时分秒可能是个位数,那么如果是个位数,我们需要对齐进行格式化处理
//如果小于10,那么给其拼字符串"0"
function getTwo(t){ //t表示形参,回头可以把月 日 时分秒作为实参传递进来进行处理
return t < 10 ? "0"+t : t;
}
</script>