JavaScript的setTimeout与setInterval定时机制介绍

时间:2012-12-29 08:41来源:未知作者:admin 点击: 次

分享到：

文章来介绍一下关于JavaScript的setTimeout与setInterval定时执行机制用法，有需要了解的同学可以参考本文章哦。代码如下 showTime(); function showTime() { var today = new Date(); alert(The time is: + today.

文章来介绍一下关于JavaScript的setTimeout与setInterval定时执行机制用法，有需要了解的同学可以参考本文章哦。

代码如下

showTime();

function showTime()

{

var today = new Date();

alert("The time is: " + today.toString());

setTimeout("showTime()", 5000);

}

一旦调用了这个函数，那么就会每隔5秒钟就显示一次时间

代码如下
setTimeout(function() { alert('你好!'); }, 0); setInterval(callbackFunction, 100);

认为setTimeout中的问候方法会立即被执行,因为这并不是凭空而说,而是JavaScript API文档明确定义第二个参数意义为隔多少毫秒后,回调方法就会被执行. 这里设成0毫秒,理所当然就立即被执行了.
同理对setInterval的callbackFunction方法每间隔100毫秒就立即被执行深信不疑!

但随着JavaScript应用开发经验不断的增加和丰富,有一天你发现了一段怪异的代码而百思不得其解:

代码如下
div.onclick = function(){ setTimeout(function() { document.getElementById('inputField').focus(); }, 0); };

既然是0毫秒后执行,那么还用setTimeout干什么, 此刻, 坚定的信念已开始动摇.

直到最后某一天 , 你不小心写了一段糟糕的代码:

代码如下
setTimeout(function() { while (true) { } }, 100); setTimeout(function() { alert('你好!'); }, 200); setInterval(callbackFunction, 200);

第一行代码进入了死循环,但不久你就会发现,第二,第三行并不是预料中的事情,alert问候未见出现,callbacKFunction也杳无音讯!

如果对计时函数不加以处理，那么setInterval将会持续执行相同的代码，一直到浏览器窗口关闭，或者用户转到了另外一个页面为止。不过还是有办法可以终止setTimeout和setInterval函数的执行。

当setInterval调用执行完毕时，它将返回一个timer ID，将来便可以利用该值对计时器进行访问，如果将该ID传递给clearInterval，便可以终止那段被调用的过程代码的执行了，具体实现如下：

File:

代码如下

settimeout_setinterval3.js (excerpt)

var intervalProcess = setInterval("alert('GOAL!')", 3000);

var stopGoalLink = document.getElementById("stopGoalLink");

attachEventListener(stopGoalLink, "click", stopGoal, false);

function stopGoal()

{

clearInterval(intervalProcess);