JavaScript計時器示例分析

更新時間：2015年02月05日 10:01:18 投稿：hebedich

這篇文章主要介紹了JavaScript計時器示例分析,需要的朋友可以參考下

1.什么是JavaScript計時器？

在JavaScript中，我們可以在設(shè)定的時間間隔之后來執(zhí)行代碼，而不是在函數(shù)被調(diào)用后立即執(zhí)行。

2.計時器類型

一次性計時器：僅在指定的延遲時間之后觸發(fā)一次。
間隔性觸發(fā)計時器：每隔一定的時間間隔就觸發(fā)一次

3.計時器方法

1):一次性計時器

A):setTimeout(): 指定的延遲時間之后來執(zhí)行代碼,進(jìn)執(zhí)行一次

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

參數(shù)說明：

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

B):clearTimeout():取消setTimeout()設(shè)置

語法:clearTimeout(timer)

參數(shù)說明:
timer：由 setTimeout() 返回的 ID 值。該值標(biāo)識要取消的延遲執(zhí)行代碼塊。

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

復(fù)制代碼代碼如下:

<!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;//該值標(biāo)識要取消的延遲執(zhí)行代碼塊

            //開始打印

            function StartPrint()

            {

                timer=setTimeout(Print,1000);//調(diào)用計時器,延遲1秒打印,只執(zhí)行一次

            }

            //結(jié)束打印

            function StopPrint()

            {

                clearTimeout(timer);//取消計時器

            }

        </script>

    </body>

</html>

調(diào)用setTimeout()和clearTimeout()無限循環(huán)方法:

復(fù)制代碼代碼如下:

<!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);//開始計時器,調(diào)用自己,進(jìn)行無窮循環(huán)

            }

            var timer;//該值表示要取消延遲執(zhí)行的代碼塊

            //開始打印

            function StartPrint()

            {

                Print();//調(diào)用打印方法

            }

            //結(jié)束打印

            function StopPrint()

            {

                clearTimeout(timer);//取消計時器

            }

        </script>

    </body>

</html>

2):間隔性觸發(fā)計時器

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

語法:setInterval(代碼,交互時間);

參數(shù)說明：

1. 代碼：要調(diào)用的函數(shù)或要執(zhí)行的代碼串。

2. 交互時間：周期性執(zhí)行或調(diào)用表達(dá)式之間的時間間隔，以毫秒計（1s=1000ms）。

返回值:

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

調(diào)用函數(shù)格式(假設(shè)有一個clock()函數(shù)):

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

B):clearInterval() 方法可取消由 setInterval() 設(shè)置的交互時間

語法：clearInterval(timer)

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

調(diào)用setInterval()和clearInterval() 執(zhí)行間隔執(zhí)行方法實例

復(fù)制代碼代碼如下:

<!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;//該值標(biāo)識要取消的計時器執(zhí)行代碼塊

            //開始打印

            function StartPrint()

            {

            timer=setInterval("Print()",1000);//開始計時器

            }

            //結(jié)束打印

            function StopPrint()

            {

                clearInterval(timer);;//取消計時器

            }

        </script>

    </body>

</html>