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

来源：https://www.cnblogs.com/coderleon/p/4951071.html

标签

settimeout

setinterval