setTimeout()和setInterval()小结
写在前面：在写H5游戏时经常需要使用定时刷新页面实现动画效果，比较常用即setTimeout()以及setInterval()
setTimeout
描述
setTimeout(code,millisec)
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
注：调用过程中，可以使用clearTimeout(id_of_settimeout)终止
| 参数 | 描述 |
|---|---|
| code | 必需，要调用的函数后要执行的 JavaScript 代码串。 |
| millisec | 必需，在执行代码前需等待的毫秒数。 |
实现刷新
setTimeout()用于延时调用指定函数，可以通过在函数中递归调用自身，实现反复调用。
<!-- setTimeout递归调用实现计时器效果： -->
<html>
<head>
<script type="text/javascript">
var t=0;
function timer(){
document.getElementById("txt").value=t;
t++;
setTimeout("timer()",1000);
}
</script>
</head>
<body>
<p>setTimeout实现计时器效果</p>
<input type="text"id="txt">
<script>
timer();
</script>
</body>
</html>
clearTimeout
clearTimeout(id_of_settimeout)
| 参数 | 描述 |
|---|---|
| id_of_settimeout | 由 setTimeout() 返回的 ID 值。 |
<!-- 调用clearTimeout()终止setTimeout() -->
<html>
<head>
<script type="text/javascript">
var t=0;
var flag;
function timer(){
document.getElementById("txt").value=t;
t++;
flag=setTimeout("timer()",1000);
}
function stop(){
clearTimeout(flag);
}
</script>
</head>
<body>
<p>setInterval实现计时器效果</p>
<input type="text"id="txt">
<input type="button" value="Stop" onclick="stop()">
<script>
timer();
</script>
</body>
</html>
setTimeinterval
setInterval(code,millisec[,"lang"])
| 参数 | 描述 |
|---|---|
| code | 必需，要调用的函数或要执行的代码串。 |
| millisec | 必需，周期性执行或调用code之间的时间间隔，以毫秒计。 |
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
<html>
<head>
<script type="text/javascript">
var t=0;
function timer(){
document.getElementById("txt").value=t;
t++;
}
</script>
</head>
<body>
<p>setInterval实现计时器效果</p>
<input type="text"id="txt">
<script type="text/javascript">
setInterval("timer()",1000);
</script>
</body>
</html>
clearInterval
clearInterval(id_of_setinterval)
| 参数 | 描述 |
|---|---|
| id_of_setinterval | 由setInterval()返回的ID值 |
<!-- 调用clearInterval()终止setInterval() -->
<html>
<head>
<script type="text/javascript">
var t=0;
var flag;
function timer(){
document.getElementById("txt").value=t;
t++;
}
</script>
</head>
<body>
<p>setInterval实现计时器效果</p>
<input type="text"id="txt">
<script type="text/javascript">
flag=setInterval("timer()",1000);
</script>
<button onclick="window.clearInterval(flag)">Stop</button>
</body>
</html>
总结
两种方式，延时调用与周期调用，调用频率达到要求时(人眼无法识别超过30帧的动画，即刷新间隔时间应小于30.3ms)，可在视觉上形成动画效果。但是现在写动画不再局限于这两个函数，有CSS3以及性能更优质的requestAnimationFrame()可以用。
*参考：
https://developer.mozilla.org/zh-CN/
http://www.w3school.com.cn
*
