详解Js中setTimeout和setInterval函数的使用

来源:CSDN大巧不工博客  作者:Bruce
摘要:内容提示:这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript。不过两者各有各的应用场景。方法实际上,setTimeout和setInterval的语法相同。它们都有两个参数,一个是将要执行的代码字符串,还有一个是以毫秒为……

讨论

如果对计时函数不加以处理,那么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);  

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

只要点击了stopGoalLink,不管是什么时候点击,intervalProcess都会被取消掉,以后都不会再继续反复执行 intervalProcess。如果在超时时间段内就取消setTimeout,那么这种终止效果也可以在setTimeout身上实现,具体实现如下:

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

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

【相关文章】好搜一下
从命令行操作的实践来谈重构的修炼

从命令行操作的实践来谈重构的修炼

阅读提示:重构是一个“永恒的话题”,只要开发在持续,那么重构就会一直伴随着我们。…