javascript定时功能详解

1.1概述
        javascript的内置setInterval()与setTimeout()函数提供了定时的功能，前者是每隔几秒执行一次，后者是延迟一段时间执行一次。此外，javascript内置的clearInterval()函数用于取消定时器功能。
1.2 setInterval()函数
定义：
       setInterval()函数可按照指定的周期（以毫秒计）来调用函数或计算表达式，使用 clearInterval()函数可以取消该周期性的方法调用。
语法：
        var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
        var intervalID = window.setInterval(code, delay);
参数详解：
intervalID —— 此重复操作的唯一辨识符，可以作为参数传给clearInterval()。
Func —— 重复调用的函数。
code —— 重复执行的一段字符串构成的代码(使用该语法是不推荐的，不推荐的原因和eval()一样)。
delay —— 每次延迟的毫秒数。
注意：IE浏览器不支持第一种语法中向延迟函数传递额外参数的功能。
实例：

var fn=function(){
    alert("fn()函数被执行了");
} 
setInterval(fn,1000);//每隔1min弹窗一次

注意：第一次执行后如果不关闭弹窗，则下一秒不会再执行该函数。出现这种现象的原因是javascript 是一个单线程环境，被阻塞了。
1.3 setTimeout()函数
定义：
        setTimeout()在指定的延迟时间之后调用一个函数或者执行一个代码片段，使用clearTimeout()函数可取消由 setTimeout() 方法设置的延迟调用。
语法：
        var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);
        var timeoutID = window.setTimeout(code, delay);
参数详解：
timeoutID —— 该延时操作的数字ID,可作为参数传给clearTimeout()。
func —— delay毫秒之后执行的函数。
code —— delay毫秒之后执行的代码 (使用该语法是不推荐的, 不推荐的原因和eval()一样)。
delay —— 延迟的毫秒数。
注意：IE浏览器不支持第一种语法中向延迟函数传递额外参数的功能。
实例一：

setTimeout(function() {
console.log(1);
}, 1000); //延迟1min后打印1
或setTimeout("console.log(1);", 1000); //不推荐使用的语法

实例二：

setTimeout(function() {
console.log(1);
}, 0);
console.log(2);
//执行结果是：先输出2，再输出1。

注意：出现这样现象的原因是：当事件队列为空的时候，才会执行SetTimeout()里面的代码。
1.3 clearInterval()函数
语法：
window.clearInterval(intervalID); // intervalID是setInerval()的返回值，是此setInerval()函数的唯一标识。
注意：用 clearInterval(Method);来清除，往往不能马上停止。
实例一：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实例</title>
</head>
<body>
<div id="clock"></div>
<button id="btn"></button>
<script>
    function Clock(clockDiv){
        this.clockDiv=clockDiv;
        this.getCurrentDate=function(){
            var currDate=new Date();
            var currDateTime=currDate.getFullYear()+"-"+(currDate.getMonth()+1)+"-"+currDate.getDate()+" "+currDate.getHours()+":"+currDate.getMinutes()+":"+currDate.getSeconds();
            this.clockDiv.innerHTML=currDateTime;
        }
    }
    var clockDiv=document.getElementById("clock");
    var clickObj=new Clock(clockDiv);
    var intervalId=window.setInterval(function () {
            clickObj.getCurrentDate();
    },1000);
    document.getElementById("btn").onclick=function(){
        window.clearInterval(intervalId);
    }
</script>
</body>
</html>

实例二：

//定义计算器全局变量
var pageTimer = {} ; 
//赋值模拟
pageTimer["timer1"] = setInterval(function(){},2000);
pageTimer["timer2"] = setInterval(function(){},2000);
//全部清除方法
for(var each in pageTimer){
    clearInterval(pageTimer[each]);
}
//暴力清除
for(var i = 1; i < 1000; i++) {
    clearInterval(i);
}

分析：实际上暴力清除的方式是不可取的，在不得已情况下才使用，在IE下，定时器返回值在IE下面是8位数字如：248147094，并且起始值不能确定，而Chrome和firefox下是从1开始的个位数字，一般项目还是建议第一种，并且第一种的扩展性也好。
1.5 clearTimeout()函数
语法：
window.clearTimeout(settimeoutID); //settimeID是setTimeout()的返回值，是此setTimeout ()函数的唯一标识。
1.4使用setTimeout()函数优化setInterval()函数的方案
一般不用setInterval()函数，而用setTimeout()函数的延时递归来代替setInterval()函数。setInterval()函数会产生回调堆积，特别是时间很短的时候。
优化方案一：

var timeout = false; //启动及关闭按钮  
function time() {
    if(timeout) return;
    console.log(1);
    setTimeout(time,1000);
}
time();

优化方案二：

var fn=function(){
console.log(1);
setTimeout(fn, 1000)
}
fn();

javascript定时功能详解

猜你喜欢