javascript定時器有哪些函數-前端問答-PHP中文網

首頁

web前端

前端問答

javascript定時器有哪些函數

青灯夜游

Oct 20, 2021 pm 04:56 PM

javascript定時器

javascript定時器有2個函數，分別為：1、setTimeout()函數，用於在指定的時間後（單位為毫秒），執行某些程式碼，程式碼只會執行一次；2、 setInterval()函數，用於依照指定的週期（單位為毫秒）來重複執行某些程式碼。

javascript定時器有哪些函數

本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

JavaScript 計時器，有時也稱為“計時器”，用來在經過指定的時間後執行某些任務，類似於我們生活中的鬧鐘。

在 JavaScript 中，我們可以利用計時器來延遲執行某些程式碼，或以固定的時間間隔重複執行某些程式碼。例如，您可以使用定時器定時更新頁面中的廣告或顯示一個即時的時鐘等。

JavaScript 中提供了兩種方式來設定計時器，分別是setTimeout() 和setInterval()，它們之間的差異如下：

##方法說明setTimeout()#在指定的時間後（單位為毫秒），執行某些程式碼，程式碼只會執行一次setInterval()依照指定的週期（單位為毫秒）來重複執行某些程式碼，計時器不會自動停止，除非呼叫clearInterval() 函數來手動停止或著關閉瀏覽器視窗

setTimeout()

JS setTimeout() 函數用來在指定時間後執行某些程式碼，程式碼僅執行一次。

JS setTimeout() 函數的語法格式如下：

setTimeout(code,millisec)

參數說明如下：

code 必要。要呼叫的函數後要執行的 JavaScript 程式碼字串。
millisec 必需。執行程式碼前需等待的毫秒數。

範例程式碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <script type="text/javascript">
        var myFun = function (str = &#39;JavaScript&#39;){
            document.write(str + "<br>");
        };
        setTimeout(myFun, 500, &#39;Hello&#39;);
        setTimeout(myFun, 1000);
        setTimeout(function(){
            document.write("定时器<br>");
        }, 1500)
        setTimeout("document.write(\"setTimeout()\")", 2000);
    </script>
</body>
</html>

執行上面的程式碼，會間隔500 毫秒，依序輸出下面的內容：

Hello
JavaScript
定时器
setTimeout()

setInterval ()

JS setInterval() 函數可以定義一個能夠重複執行的計時器，每次執行需要等待指定的時間間隔。

JS setInterval() 函數的語法格式如下：

setInterval(code,millisec[,"lang"])

參數說明如下：

code 必要。要呼叫的函數或要執行的程式碼字串。
millisec 必須。週期性執行或呼叫 code 之間的時間間隔，以毫秒計。

提示：透過 setInterval() 函數定義的計時器不會自動停止，除非呼叫 clearInterval() 函數來手動停止或著關閉瀏覽器視窗。

範例程式碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <p id="one"></p>
    <p id="two"></p>
    <script type="text/javascript">
        var num = 1;
        var myFun = function (){
            document.getElementById(&#39;one&#39;).innerHTML += num + " ";
            num ++;
        };
        setInterval(myFun, 500);
        setInterval(function(){
            var d = new Date();
            document.getElementById(&#39;two&#39;).innerHTML = d.toLocaleTimeString();
        }, 1000);
    </script>
</body>
</html>

執行結果如下：

javascript定時器有哪些函數

#JS 取消計時器

當使用setTimeout() 或setInterval() 設定計時器時，這兩個方法都會產生一個計時器的唯一ID，ID 為一個正整數值，也被稱為“定時器識別碼”，透過這個ID ，我們可以清除ID 所對應的定時器。

我們可以藉助 clearTimeout() 或 clearInterval() 函式來分別清除由 setTimeout() 或 setInterval() 函式所建立的定時器。呼叫clearTimeout() 或clearInterval() 函數需要提供計時器的唯一ID 作為參數，範例程式碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <p>当前时间为：<span id="clock"></span></p>
    <button onclick="stopClock(this);">停止</button><hr>
    <button onclick="delayedAlert(this);">2秒后弹出一个提示框</button>
    <button onclick="clearAlert();">取消</button>
    <script type="text/javascript">
        var intervalID;
        function showTime() {
            var d = new Date();
            document.getElementById("clock").innerHTML = d.toLocaleTimeString();
        }
        function stopClock(e) {
            clearInterval(intervalID);
            e.setAttribute(&#39;disabled&#39;, true)
        }
        intervalID = setInterval(showTime, 1000);
        var timeoutID;
        var that;
        function delayedAlert(e) {
            that = e;
            timeoutID = setTimeout(showAlert, 2000);
            e.setAttribute(&#39;disabled&#39;, true)
        }
        function showAlert() {
            alert(&#39;这是一个提示框。&#39;);
            that.removeAttribute(&#39;disabled&#39;);
        }
        function clearAlert() {
            clearTimeout(timeoutID);
            that.removeAttribute(&#39;disabled&#39;);
        }
    </script>
</body>
</html>

執行結果如下圖所示：

javascript定時器有哪些函數