JavaScript setTimeout与setInterval使用案例详解

这两个方法均用于在指定时间间隔后执行JavaScript代码，但各自适用于不同的应用场景。

实际上，setTimeout和setInterval的语法结构一致。它们都接收两个参数：一个是待执行的代码字符串，另一个是以毫秒为单位的时间间隔。当设定的时间到达后，系统便会执行对应的代码。

然而，这两个函数存在显著差异：setInterval在代码执行完毕后，经过固定的时间间隔会自动重复执行；而setTimeout仅执行一次指定的代码。

尽管表面上看，setTimeout似乎仅适用于单次触发的动作，但通过创建一个函数来循环调用setTimeout，可以实现重复执行的效果：

showTime();
function showTime()
{
    var today = new Date();
    alert("The time is: " + today.toString());
    setTimeout("showTime()", 5000);
}

一旦使用上述函数，系统便会每隔5秒显示一次当前时间。若改用setInterval，相应的代码如下所示：

setInterval("showTime()", 5000);
function showTime()
{
    var today = new Date();
    alert("The time is: " + today.toString());
}

这两种方法在表现上可能非常相似，显示结果也相近，但最大区别在于执行机制：setTimeout并非每隔5秒执行一次showTime函数，而是在每次调用setTimeout后，等待5秒再执行showTime。这意味着，如果showTime主体部分耗时2秒，那么整个函数的执行周期实际上是每7秒一次。相比之下，setInterval不受自身调用函数的束缚，它只是简单地每隔固定时间重复执行一次该函数。

如果要求在固定时间间隔后精确执行某动作，建议使用setInterval；而如果担心连续调用产生相互干扰，特别是当函数涉及繁重计算或长时间处理时，则最好使用setTimeout。

函数指针的使用

两个计时函数的第一个参数通常是一段代码字符串，但实际上该参数也可以是一个函数指针，不过Mac下的IE 5对此支持不佳。

若将函数指针作为setTimeout和setInterval函数的参数，即可执行其他位置定义的函数：

setTimeout(showTime, 500);
function showTime()
{
    var today = new Date();
    alert("The time is: " + today.toString());
}

此外，匿名函数还可以声明为内联函数：

setTimeout(function(){var today = new Date();
alert("The time is: " + today.toString());}, 500);

讨 论

若不对计时函数进行处理，setInterval将持续执行相同的代码，直到浏览器窗口关闭或用户跳转到其他页面。不过，仍有办法可以终止setTimeout和setInterval的执行。

当setInterval调用执行完毕时，它将返回一个timer ID，未来可利用该值访问计时器。若将该ID传递给clearInterval，即可终止被调用过程代码的执行，具体实现如下：

var intervalProcess = setInterval("alert('GOAL!')", 3000);
var stopGoalLink = document.getElementById("stopGoalLink");
attachEventListener(stopGoalLink, "click", stopGoal, false);
function stopGoal()
{
    clearInterval(intervalProcess);
}

只要点击了stopGoalLink，无论何时点击，intervalProcess都会被取消，此后不再反复执行intervalProcess。若在超时时间段内取消setTimeout，同样可实现终止效果，具体实现如下：

var timeoutProcess = setTimeout("alert('GOAL!')", 3000);
var stopGoalLink = document.getElementById("stopGoalLink");
attachEventListener(stopGoalLink, "click", stopGoal, false);
function stopGoal() {
   clearTimeout(timeoutProcess);
}

到此这篇关于JavaScript setTimeout与setTimeinterval使用案例详解的文章就介绍到这了，更多相关js setTimeout与setTimeinterval内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！