JavaScript計時器樣本分析

JavaScript計時器樣本分析_javascript技巧

最後更新：2017-01-19 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

1.什麼是JavaScript計時器？

在JavaScript中，我們可以在設定的時間間隔之後來執行代碼，而不是在函數被調用後立即執行。

2.計時器類型

一次性計時器：僅在指定的延遲時間之後觸發一次。
間隔性觸發計時器：每隔一定的時間間隔就觸發一次

3.計時器方法

1):一次性計時器

A):setTimeout(): 指定的延遲時間之後來執行代碼,進執行一次

文法:setTimeout(代碼,延遲時間);

參數說明：

1. 要調用的函數或要執行的代碼串。
2. 延時時間：在執行代碼前需等待的時間，以毫秒為單位（1s=1000ms)。

B):clearTimeout():取消setTimeout()設定

文法:clearTimeout(timer)

參數說明:
timer：由 setTimeout() 返回的 ID 值。該值標識要取消的順延強制代碼塊。

調用setTimeout()和clearTimeout()延遲方法:

複製代碼代碼如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JavaScript計時器</title>
        <input type="button" value="開始" id="btnStart" onclick="StartPrint()">
        <input type="button" value="暫停" id="btnStop" onclick="StopPrint()">
        <br>
    </head>
    <body>
        <script type="text/javascript">
            //定義列印方法
            function Print()
            {
                console.log("我在列印!");
            }
            var timer;//該值標識要取消的順延強制代碼塊
            //開始列印
            function StartPrint()
            {
                timer=setTimeout(Print,1000);//調用計時器,延遲1秒列印,只執行一次
            }
            //結束列印
            function StopPrint()
            {
                clearTimeout(timer);//取消計時器
            }
        </script>
    </body>
</html>

調用setTimeout()和clearTimeout()無限迴圈方法:

複製代碼代碼如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JavaScript計時器</title>
        <input type="button" value="開始" id="btnStart" onclick="StartPrint()">
        <input type="button" value="暫停" id="btnStop" onclick="StopPrint()">
        <br>
    </head>
    <body>
        <script type="text/javascript">
            //定義列印方法
            function Print()
            {
                console.log("我在列印!");
                timer=setTimeout(Print,1000);//開始計時器,調用自己,進行無窮迴圈
            }
            var timer;//該值表示要取消順延強制的代碼塊
            //開始列印
            function StartPrint()
            {
                Print();//調用列印方法
            }
            //結束列印
            function StopPrint()
            {
                clearTimeout(timer);//取消計時器
            }
        </script>
    </body>
</html>

2):間隔性觸發計時器

A):setInterval():在執行時,從載入頁面後每隔指定的時間執行代碼

文法:setInterval(代碼,互動時間);

參數說明：

1. 代碼：要調用的函數或要執行的代碼串。

2. 互動時間：周期性執行或調用運算式之間的時間間隔，以毫秒計（1s=1000ms）。

傳回值:

一個可以傳遞給 clearInterval() 從而取消對"代碼"的周期性執行的值。

調用函數格式(假設有一個clock()函數):

setInterval("clock()",1000) 或 setInterval(clock,1000)

B):clearInterval() 方法可取消由 setInterval() 設定的互動時間

文法：clearInterval(timer)

參數說明:
timer：由 setInterval() 返回的 ID 值。

調用setInterval()和clearInterval() 執行間隔執行方法執行個體

複製代碼代碼如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JavaScript計時器</title>
        <input type="button" value="開始" id="btnStart" onclick="StartPrint()">
        <input type="button" value="暫停" id="btnStop" onclick="StopPrint()">
        <br>
    </head>
    <body>
        <script type="text/javascript">
            //定義列印方法
            function Print()
            {
                console.log("我在列印!");
            }
            var timer;//該值標識要取消的計時器執行代碼塊
            //開始列印
            function StartPrint()
            {
            timer=setInterval("Print()",1000);//開始計時器
            }
            //結束列印
            function StopPrint()
            {
                clearInterval(timer);;//取消計時器
            }
        </script>
    </body>
</html>

以上就是本文所述的全部內容了，希望小夥伴們能夠喜歡。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More