Javascript 中setTimeout 和 setInterval

这篇文章里我们看一下javascript 中的如何使用setTimeout(), clearTimeout(), setInterval() 和 clearInterval() 几个与时间设置有关的函数。使用这些函数可以设置定时器和延时任务，并且很方便。

• setTimeout()

windows.setTimeout()函数允许设定一定的延时，来执行所要执行的任务。设置的任务将在函数被调用后的数秒之后被执行。调用方法如下：

setTimeout ( expression, timeout );

expression  是到达延时时间后要执行的javascript 代码

setTimeout 函数将返回数字类型的延时标志，这个返回值会被clearTimeout函数调用 

简单的例子：

 

<input type="button" name="clickMe" value="Click me and wait!"
onclick="setTimeout('alert(\'Surprise!\')', 5000)"/>

 

再点击按钮5秒后弹出信息："Surprise!"

 

一个较完整的例子：

<script type="text/javascript">

function setToRed ( )
{
  document.getElementById("colourButton").style.color = "#FF0000";
  setTimeout ( "setToBlack()", 2000 );
}

function setToBlack ( )
{
  document.getElementById("colourButton").style.color = "#000000";
}

</script>

<input type="button" name="clickMe" id="colourButton" value="Click me and wait!" onclick="setToRed()"/>

 

从上面的例子可以看到，按钮被点击后，按钮文字变成红色持续两秒钟，随后变成黑色字体。

 

<script type="text/javascript">

var alertTimerId = 0;

function alertTimerClickHandler ( )
{
  if ( document.getElementById("alertTimerButton").value == "Click me and wait!" )
  {
    // Start the timer
    document.getElementById("alertTimerButton").value = "Click me to stop the timer!";
    alertTimerId = setTimeout ( "showAlert()", 3000 );
  }
  else
  {
    document.getElementById("alertTimerButton").value = "Click me and wait!";
    clearTimeout ( alertTimerId );
  }
}

function showAlert ( )
{
  alert ( "Too late! You didn't stop the timer." );
  document.getElementById("alertTimerButton").value = "Click me and wait!";
}

</script>

<input type="button" name="clickMe" id="alertTimerButton" value="Click me and wait!" onclick="alertTimerClickHandler()"/>

 

• clearTimeout()

 有的时候在延时程序完成之前要结束延时任务，会用到clearTimeout，其调用方式为：

clearTimeout ( timeoutId );

timeoutId 是setTimeout函数被调用后返回的延时标志

下面的例子当用户点击按钮3秒钟后，会弹出对话框信息，但是在此期间用户可以再次点击按钮结束延时，阻止窗口的弹出。

 

 

<script type="text/javascript">

var alertTimerId = 0;

function alertTimerClickHandler ( )
{
  if ( document.getElementById("alertTimerButton").value == "Click me and wait!" )
  {
    // Start the timer
    document.getElementById("alertTimerButton").value = "Click me to stop the timer!";
    alertTimerId = setTimeout ( "showAlert()", 3000 );
  }
  else
  {
    document.getElementById("alertTimerButton").value = "Click me and wait!";
    clearTimeout ( alertTimerId );
  }
}

function showAlert ( )
{
  alert ( "Too late! You didn't stop the timer." );
  document.getElementById("alertTimerButton").value = "Click me and wait!";
}

</script>

<input type="button" name="clickMe" id="alertTimerButton" value="Click me and wait!" onclick="alertTimerClickHandler()"/>

 

• setInterval() 函数

和setTimeout()函数相似，setInterval函数的定义方法为setInterval(expression, interval);当使用setTimeout函数做如下操作时，可以考虑用setInterval函数替换

 

setTimeout ( "doSomething()", 5000 );

function doSomething ( )
{
  // (do something here)
  setTimeout ( "doSomething()", 5000 );
}

 

 setInterval方法：

 

setInterval ( "doSomething()", 5000 );

function doSomething ( )
{
  // (do something here)
}

 

当需要提供连续精确的时间或时间间隔时setInterval将是最好的选择

• clearInterval()

和clearTimeout函数一样，通过setInterval返回的ID值，调用clearInterval方法结束一个setInterval,下面是一个可运行的setInterval和clearInterval函数简单实例：

 

 

<script type="text/javascript">

var wooYayIntervalId = 0;

function wooYayClickHandler ( )
{
  if ( document.getElementById("wooYayButton").value == "Click me!" )
  {
    // Start the timer
    document.getElementById("wooYayButton").value = "Enough already!";
    wooYayIntervalId = setInterval ( "wooYay()", 1000 );
  }
  else
  {
    document.getElementById("wooYayMessage").innerHTML = "";
    document.getElementById("wooYayButton").value = "Click me!";
    clearInterval ( wooYayIntervalId );
  }
}

function wooYay ( )
{
  if ( Math.random ( ) > .5 )
  {
    document.getElementById("wooYayMessage").innerHTML = "Woo!";
  }
  else
  {
    document.getElementById("wooYayMessage").innerHTML = "Yay!";
  }

  setTimeout ( 'document.getElementById("wooYayMessage").innerHTML = ""', 500 );

}

</script>

<div id="wooYayMessage" style="height: 1.5em; font-size: 2em; color: red;"></div>
<input type="button" name="clickMe" id="wooYayButton" value="Click me!" onclick="wooYayClickHandler()"/>

 

 

 

 

 

 引用网址：http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/