window对象有两个主要的定时方法，分别是settimeout 和 setinteval 他们的语法基本上相同，但是完成的功能取有区别。
settimeout方法是定时程序，也就是在什么时间以后干什么。干完了就拉倒。
setinterval方法则是表示间隔一定时间反复执行某操作。
如果用settimeout实现setinerval的功能，就需要在执行的程序中再定时调用自己才行。如果要清除计数器需要 根据使用的方法不同，调用不同的清除方法：
这两种方法可能看起来非常像，而且显示的结果也会很相似，不过两者的最大区别就 是，setTimeout方法不会每隔5秒钟就执行一次showTime函数，它是在每次调用setTimeout后过5秒钟再去执行showTime函 数。这意味着如果showTime函数的主体部分需要2秒钟执行完，那么整个函数则要每7秒钟才执行一次。而setInterval却没有被自己所调用的 函数所束缚，它只是简单地每隔一定时间就重复执行一次那个函数。
如果要求在每隔一个固定的时间间隔后就精确地执行某动作，那么最好使用setInterval，而如果不想由于连续调用产生互相干扰的问题，尤其是每次函数的调用需要繁重的计算以及很长的处理时间，那么最好使用setTimeout。
setTimeout和setInterval这两个函数, 大家肯定都不陌生, 但可能并不是每个用过这两个方法的同学, 都了解其内部的实质
甚至可能会错误的把两个实现定时调用的函数理解成了类似thread一样的东西, 认为会在一个时间片内, 并发的执行调用的函数, 似乎很好很强大, 但其实并不是如此, 实际的情况是javascript都是以单线程的方式运行于浏览器的javascript引擎中的, setTimeout和setInterval的作用只是把你要执行的代码在你设定的一个时间点插入js引擎维护的一个代码队列中, 插入代码队列并不意味着你的代码就会立马执行的,理解这一点很重要. 而且setTimeout和setInterval还有点不一样.
先谈谈setTimeout
- function click() {
- // code block1...
- setTimeout(function() {
- // process ...
- }, 200);
- // code block2
- }
假设我们给一个button的 当我们按下按钮后, 肯定先执行block1的内容, 然后运行到setTimeout的地方, setTimeout会告诉浏览器说, "200ms后我会插一段要执行的代码给你的队列中", 浏览器当然答应了(注意插入代码并不意味着立马执行), setTimeout代码运行后, 紧跟其后的block2代码开始执行, 这里就开始说明问题了, 如果block2的代码执行时间超过200ms, 那结果会是如何? 或许按照你之前的理解, 会理所当然的认为200ms一到, 你的process代码会立马执行...事实是, 在block2执行过程中(执行了200ms后)process代码被插入代码队列, 但一直要等click方法执行结束, 才会执行process代码段, 从代码队列上看process代码是在click后面的, 再加上js以单线程方式执行, 所以应该不难理解. 如果是另一种情况, block2代码执行的时间<200ms, setTimeout在200ms后将process代码插入到代码队列, 而那时执行线程可能已经处于空闲状态了(idle), 那结果就是200ms后, process代码插入队列就立马执行了, 就让你感觉200ms后, 就执行了.
再看看setInterval
这里可能会存在两个问题:
1.时间间隔或许会跳过
2.时间间隔可能<定时调用的代码的执行时间
- function click() {
- // code block1...
- setInterval(function() {
- // process ...
- }, 200);
- // code block2
- }
和上面一样我们假设通过一个click, 触发了setInterval以实现每隔一个时间段执行process代码
比如 block1代码执行完, 在5ms时执行setInterval, 以此为一个时间点, 在205ms时插入process代码, click代码顺利结束, process代码开始执行(相当于图中的timer code), 然而process代码也执行了一个比较长的时间, 超过了接下来一个插入时间点405ms, 这样代码队列后又插入了一份process代码, process继续执行着, 而且超过了605ms这个插入时间点, 下面问题来, 可能你还会认为代码队列后面又会继续插入一份process代码...真实的情况是,由于代码队列中已经有了一份未执行的process代码, 所以605ms这个插入时间点将会被"无情"的跳过, 因为js引擎只允许有一份未执行的process代码, 说到这里不知道您是不是会豁然开朗呢...
为了这种情况你可以用一种更好的代码形式
- setTimeout(function(){
- //processing
- setTimeout(arguments.callee, interval);
- }, interval);
这个估计稍微想一下, 就明白其中的好处了, 这样就不会产生时间点被跳过的问题内容就到这里, 希望能有所帮助, 可能我表达的不是很清楚如果觉得自己英语基础不错可以直接看
里有关advanced Timers这节内容, 个人认为这本书真的很不错, 无论是想从零学起, 还是平日没事翻翻参考参考 都很不错, 作者是yahoo里很牛的一位前端开发工程师 : )
1.setTimeout(表达式,延时时间)
在执行时,是在载入后延迟指定时间后,去执行一次表达式,记住,次数是一次 ，setTimeOut 延迟执行一次(只执行一次) 放控制函数内部
例子：setTimeout调用又返回值的函数
<html>
<head>
<title>setTimeout调用又返回值的函数</title>
<script language="javascript" type="text/javascript">
var retValue = "";
function test()
{
return "哈哈哈哈哈";
}
function clickButton1()
{
var iTimeoutId = setTimeout("retValue = test() ",1000);
}
function clickButton2()
{
alert(retValue);
}
</script>
</head>
<body>
<input type="button" value="button1">
<input type="button" value="button2">
</body>
</html>
例子：用setTimeout实现的自动变化显示随机数的效果:
<html>
<head>
<script>
window.
function sett()
{
document.body.innerHTML=Math.random();
setTimeout("sett()",500);
}
</script>
</head>
<body>
</body>
</html>
2.setInterval(表达式,交互时间)
则不一样,它从载入后,每隔指定的时间就执行一次表达式 ，setInterval 定时执行一次(循环执行) 放控制函数外部
例子：用setInterval实现的自动变化显示随机数的效果:
<html>
<head>
<script>
function sett()
{
document.body.innerHTML=Math.random();
}
setInterval("sett();", 500);
</script>
</script>
</head>
<body>
</body>
</html>
例子：
<html>
<head>
<script language="javascript">
function text(){
this.aa="aaaa";
this.aa="adfadf";
window.obj = this;
this.showMsg=msg;
function msg(){
alert(obj.aa);
setTimeout("obj.showMsg()",1000);
}
}
var text1=new text;
text1.showMsg(text1);
</script>
</head>
<body>
</body>
</html>
停止：
主要是利用
window.clearInterval(intervalID);
window.clearTimeout(timeoutID);
<SCRIPT>
var intervalID=0;
function f_start(){
intervalID=window.setInterval("f_add()",500);
}
function f_add(){
}
function f_stop(){
window.clearInterval(intervalID);
}
</SCRIPT>
*********************************
上一篇写了关于setTimeout的东西，想再写点setInterval的, 并且这次写的严谨些。
Java可发者熟悉对象的wait()方法，可使程序暂停，再继续执行下一行代码前，等待指定的时间量。 这种功能非常有用，遗憾的是，JavaScript 未提供相应的支持。 但这种功能并非完全不能实现，有几种方法可以采用。
JavaScript支持暂停和时间间隔，这可有效地告诉浏览器应该何时执行某行代码。 所谓暂停，是在指定的毫秒数后执行的代码。 时间间隔是反复执行指定的代码，每次执行之间等待指定的毫秒数。
可以用window对象的setTimeout()方法设置暂停。该方法接受两个参数，要执行的代码和在执行它之前要等待的毫秒数(1/1000秒)。第 一个参数可以是代码串(与eval()函数的参数相同)，也可以是函数指针。例如，下面的代码都在1秒钟后显示一条警告：
setTimeout("alert('Hello World!')",1000);
setTimeout(function(){ alert('Hello World!'); },1000);
当然，还可以引用以前定义的函数：
function sayHelloWorld()
{
alert("Hello World!");
}
setTimeout(sayHelloWorld,1000);
调用setTimeout()时，它创建一个数字暂停ID，与操作系统中的进程ID相似。暂停ID本质上是要延迟的进程ID，再调用 setTimeout()后，就不应该再执行它的代码。要取消还未执行的暂停，可调用clearTimeout()方法，并将暂停ID传递给它：
var iTimeoutId = setTimeout("alert('Hello World!')",1000);
alert(iTimeoutId);
clearTimeout(iTimeoutId);
其中，iTimeoutId 是一串数字，例如 38734218
你也许会问：“为什么要定义暂停，又在执行它之前将其取消呢？”请考虑在大多数应用程序中可见的工具提示。当把鼠标移动到一个按钮上时，停留一会，等待出 现黄色的文本框，提示该按钮的功能。如果只是短暂的把鼠标该按钮上，然后很快将其移动到另一个按钮上，那么第一个按钮的工具提示就不会显示，这就是要在执 行暂停代码前取消它的原因。因为你在执行代码前只想等待指定的时间量。如果用户的操作产生了不同的结果，则要取消该暂停。
时间间隔与暂停的运行方式相似，只是它无限此地每隔指定的时间段就重复执行一次指定的代码。可调用setInterval()方法设置时间间隔，它的参数与setTimeout()相同，是要执行的代码和每次执行之间等待的毫秒数。例如：
setInterval("alert('Hello world!')",1000);
setInterval(function() { alert("Hello world!"); },1000);
function sayHelloWorld()
{
alert("Hello World!");
}
setInterval(sayHelloWorld,1000);
此外，与setTimeout()类似，setInterval()方法也创建时间间隔ID，以标识要执行的代码。clearInterval()方法可 用这个ID阻止再次执行该代码。显然。这一点在使用时间间隔时更重要，因为如果不取消时间间隔，就会一直执行它，直到页面被卸载为止。下面是时间间隔用法 的一个常见示例：
var iNum = 0;
var iMax = 100;
var iIntervalId = null;
function incNum()
{
iNum++;
if(iNum == iMax)
{
clearInterval(iIntervalId);
}
}
iIntervalId = setInterval(incNum, 500);
在这段代码中，每隔500毫秒就对数字iNum进行一次增量运算，直到它达到最大值(iMax), 此时该时间间隔将被清除。也可以用暂停实现该操作，这样即不必跟踪时间间隔的ID，代码如下：
var iNum = 0;
var iMax = 100;
function incNum()
{
iNum++;
if(iNum != iMax)
{
setTimeout(incNum,500);
}
}
setTimeout(incNum,500);
这段代码使用链接暂停，即setTimeout()执行的代码页调用了setTimeout()。如果在执行过增量运算后，iNum不等于 iMax,就调用setTimeout()方法。不必跟踪暂停ID，也不必清除它，因为代码执行后，将销毁暂停ID。
本文转自许琴 51CTO博客，原文链接：http://blog.51cto.com/xuqin/949052，如需转载请自行联系原作者
