setTimeout()和setInterval()小結

時間 2019-11-10

標籤 settimeout setinterval 小結简体版

原文原文鏈接

寫在前面：在寫H5遊戲時常常須要使用定時刷新頁面實現動畫效果，比較經常使用即setTimeout()以及setInterval()javascript

setTimeout

描述

setTimeout(code,millisec)
setTimeout() 方法用於在指定的毫秒數後調用函數或計算表達式。
注：調用過程當中，能夠使用clearTimeout(id_of_settimeout)終止html

參數	描述
code	必需，要調用的函數後要執行的 JavaScript 代碼串。
millisec	必需，在執行代碼前需等待的毫秒數。

實現刷新

setTimeout()用於延時調用指定函數，能夠經過在函數中遞歸調用自身，實現反覆調用。java

<!-- 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)code

參數	描述
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()能夠用。htm

*參考：
https://developer.mozilla.org/zh-CN/
http://www.w3school.com.cn遞歸

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。