JavaScript 定时器 SetTimeout与SetInterval详解及链式调用方案

JavaScript定时器基础用法

以下内容直接提供相关代码示例。

// 每隔五秒定时刷新当前窗口
setTimeout("self.location.reload();",5000);
//js 定时关闭窗口(ie和FF中测试过)
//6秒后自动关闭当前窗口
setTimeout("window.opener=null;window.close()",6000);

setTimeout与setInterval详解

下面介绍JavaScript定时器的具体使用方法。

利用定时器可以实现JavaScript代码的延期执行或重复执行。window对象提供了两种实现方式，分别是

window.setTimeout()和window.setInterval。前者用于在指定时间后执行代码，后者用于每隔指定时间重复执行代码。其原型定义如下： window.setTimeout(expression,milliseconds); window.setInterval(expression,milliseconds); 其中expression参数可以是字符串或函数名。若为字符串，可携带参数；若为函数名，则不能直接带参数，否则函数会立即执行而非延时。

 function hello (){ 
console.log('I am dada'); //alert('I am ' + name);
//setTimeout(arguments.callee,2000); 
} setTimeout(hello,5000);//5秒后执行 setTimeout('hello()',3000);//3秒后执行
setTimeout(hello(),8000);//立刻执行 

第一种情况是使用函数名，但无法直接传递参数。

第二种情况是使用字符串，即执行的JavaScript代码，支持传递参数，但性能通常低于直接调用函数名。

第三种情况是直接调用函数，这会立即执行代码。

解决函数传参问题的封装方法

因此，若希望传递参数且避免使用字符串形式，可以封装一个方法来实现：

function _hello(_name){ 
return function(){ 
hello2(_name); 
} 
} 
setTimeout(_hello(name),7000);//立刻执行

setTimeout的执行机制

一、setTimeout

setTimeout(function(){
//要执行的代码 
},200);

该函数会在200ms后将代码添加到任务队列中，待JavaScript主进程空闲后才会执行该代码。

setInterval的队列行为与问题

二、setInterval

1. 上述代码表示每隔200ms创建一个执行代码的定时器。\n\n2. 使用setInterval时，只有当队列中没有该定时器的其他代码实例时，新代码才会被添加到队列中。引用《JavaScript高级程序设计》中的描述：当前一个定时器代码执行时，紧随其后的第一个定时器代码会被添加到队列中等待执行，而后续的定时器代码则不会添加到队列中。

在使用setInterval执行重复行为时，可能会遇到一个问题：

当定时器代码的执行时间（例如需要600ms）超过设定的间隔时间（例如200ms）时，部分定时器代码会被跳过（即后续代码不会添加到队列中）。当前一个定时器代码执行完毕后，队列中的下一个代码会立即执行，导致各次执行之间没有间隔。此时，建议使用链式setTimeout。

这样做的好处在于：前一个定时器代码执行完毕并等待200ms后，才创建新的定时器并将代码添加到队列中执行。这避免了代码被跳过的情况，且各次执行之间可根据设置保持间隔。

setTimeout(function(){
//要执行的代码 
setTimeout(arguments.callee,2000); 
},2000);
setInterval(function(){
//要执行的代码 
},200);

本文介绍到此结束，希望以上内容能对大家有所帮助，感谢支持。