Using setTimeout and setInterval

十二月 4, 2008 作者:  
类别:Web应用

In JavaScript , ed setTimeout and setInterval can perform codes after some time you gived. Their syntax are same. Their have two parameters. One is codes that will be performed, order the other is time that the unit is milliseconds. In fact, approved the two function are different.  Finished first performing the codes, after the fixed time interval, setInterval will automatically repeat perfoming the codes. setTimeout only performs the codes once.The work mode of  setTimeout  is like on-off. For example,

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

After running the codes, we will see “The time is: Thu Dec 4 10:51:47 UTC+0800 2008” on the screen.

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

After running the codes,we will have to click the confirm button every 5 seconds. (It’s a problem. you must shutdown the browers within 4 second. Good luck~~)

If you write your codes like this, setTimeout will not be on-off. It’s circulation,becomes setInterval.

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

If you observe the codes and result carefully,you’ll find that the second and the third codes are different. setInterval can automatically perform the codes every time interval you set. The time interval is very exact. If your codes performed by setInterval are prolix and complex. The runtime may be longer than the time interval, But setInterval  still performs the codes when the time is out. In the third codes ,setTimeout can perform the codes every 5 second, the difference is that  completed  the implementation of the code ,setTimeout will run again after 5 seconds. If the time of performing the code is 2 seconds, setTimeout will be perfomed after 7 seconds. Between the two implementations, time interval is 7 seconds. The two implementations are not disturb each other.

when setTimeout and setInterval are performed ,they return “Time ID”.  Using the “Time ID”, we can stop them. With it, we will not need to close your browser directly. “clearInterval(TimeID)” is used to stop setInterval. “clearTimeout(TimeID)” is used to stop other. For example,

<script type=text/javascript>
var intervalProcess = setInterval(“alert(‘setInterval is running’)”, 5000);

function stopsetInterval()
{
clearInterval(intervalProcess);
}
</script>
<button onclick=”stopsetInterval()” > Stop setInterval </button>

when you click the button,the setInterval is stop. Using clearTimeout ,you can stop setTimeout when the time is not out.

<script type=text/javascript>
var timeoutProcess = setTimeout(“alert(‘setInterval is running’)”, 5000);

function stopsetTimeout()
{
clearTimeout(timeoutProcess);
}
</script>
<button onclick=”stopsetTimeout()” > Stop setTimeout </button>

In 5 seconds , you can click the button to stop the setTimeout.

你想说点啥呢?

如果你喜欢下面这些小头像,请到 gravatar 免费申请!