通过代码实例跟我学JavaScript ——JavaScript定时器及其应用实例

1.1通过代码实例跟我学JavaScript ——JavaScript定时器及其应用实例

1、定时方法setTimeout 或者setInterval

（1）setTimeout语法格式（1.0版）

window.setTimeout(定时处理的函数,毫秒数)

在执行时是在载入后延迟指定时间后，去执行一次表达式。

（2）setInterval语法格式（1.2版）

window.setInterval(定时处理的函数,毫秒数)

它从载入后，每隔指定的时间就执行一次表达式。

注意：setTimeout及setInterval函数的完整语法

var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);

var timeoutID = window.setTimeout(code, delay);

var intervalID = window.setInterval(func, delay[, param1, param2, ...]);

var intervalID = window.setInterval(code, delay);

因此，其中的第1个参数可以为字符串形式的JS代码，也可以为某个函数的名称；但IE 浏览器对setTimeout及setInterval函数不支持第三个参数，只能带两个参数。

（3）clearTimeout方法

语法格式：window.clearTimeout (返回的定时器对象)

它取消setTimeout设置的定时。其中的参数是setTimeout方法的返回值。

（4）clearInterval方法

语法格式：window.clearInterval(返回的定时器对象)

它取消setInterval设置的定时。其中的参数是setInterval方法的返回值。

2、应用定时器

3、定时器（也就是Java中的线程）应用示例

（1）代码示例

（2）执行的结果

4、利用定时器实现简单的动画的示例

（1）页面及JavaScript脚本代码

开始滚动窗口

（2）测试其效果

（3）如果改变为采用setInterval的方式，代码如下：

游戏开始

（4）进一步改进为“左右滚动（产生摆动运动的效果）”

开始摆动窗口

其中的moveTo函数请见API说明。

（5）如果需要将窗口上、下运动，代码如下：

开始摆动窗口

5、定时消失的图层效果

层中的内容信息

6、调用带有参数的定时处理方法

（1）IE浏览器不支持带有参数的定时处理方法

由于在IE浏览器中不提供对带有参数的定时处理方法的支持（但在FireFox中支持），

因此需要使用匿名函数，即在调用setTimeout时定义一个匿名函数，在这个函数内部进行原来需要进行的操作。

（2）代码示例

window.setTimeout(function(){

sendQueryTaskRequest(webContext_Global);

}, 1000);

7、也可以采用重新定义setTimeout和setInterval方法实现传递参数

（1）在*.js文件中添加如下的代码

/******************************************************

//

// 功能: 修改window.setTimeout,使之可以传递参数和对象参数

// 使用方法: window.setTimeout(回调函数,延迟时间,参数1,参数n)

//

******************************************************/

var mySetTimeOut = setTimeout;

window.setTimeout = function(callback, timeout){

var args = Array.prototype.slice.call(arguments, 2);

function callFn(){

callback.apply(null, args);

}

return mySetTimeOut(callFn, timeout);

};

/******************************************************

//

// 功能: 修改window.setInterval,使之可以传递参数和对象参数

// 使用方法: window.setInterval(回调函数,间隔时间,参数1,参数n)

//

******************************************************/

var mySetInterval = setInterval;

window.setInterval = function(callback, interval){

var args = Array.prototype.slice.call(arguments, 2);

function callFn(){callback.apply(null, args);}

return mySetInterval(callFn, interval);

};

（2）在setTimeout或者setInterval方法中实现传递参数（包括对象参数）window.setTimeout(sendQueryTaskRequest,1000, webContext);

上面代码中的sendQueryTaskRequest函数为定时处理功能函数，而webContext为向定时处理功能函数sendQueryTaskRequest所传递的一个调用参数。下面为定时处理功能函数sendQueryTaskRequest的定义：

function sendQueryTaskRequest(webContext){

}

8、利用定时器实现倒计时的示例

（1）示例页面

（2）执行后的结果