JavaScript定時器原理

阿新 • • 發佈：2021-12-08

一、 setTimeout() 定時器

語法：

window.setTimeout(呼叫函式,[延遲的毫秒數]);

setTimeout()方法用於設定一個定時器，該定時器在定時器到期後執行呼叫函式。
例如：寫一個頁面，讓其五秒鐘後彈出‘你好'。

程式碼如下：

window.setTimeout(function(){
            alert('你好');
        },5000);

執行結果為：

在這裡插入圖片描述

需要注意的是：

window 可以省略。
這個呼叫函式可以直接寫函式，或者寫函式名或者採取字串‘函式名()'三種形式。
延遲的毫秒數省略預設是 0，如果寫，必須是毫秒。setTimeout() 這個呼叫函式我們也稱為回撥函式callback，普通函式是按照程式碼順序直接呼叫。而這個函式，需要等待時間，時間到了才去呼叫這個函式，因此稱為回撥函式。

二、停止 setTimeout() 定時器

當我們建立了一個定時器的話，如果我們想要將其取消，應該怎樣操作呢？就用到了清除定時器的函式，如下：

window.clearTimeout(timeoutID)

clearTimeout()方法取消了先前通過呼叫 setTimeout()建立的定時器。
這裡面window 可以省略，並且裡面的引數就是定時器的識別符號。

舉個例子：

就上述案列，如果我們想要在指定事件前停止它，可以先新增一個點選按鈕，給這個按鈕新增清除定時器的事件，操作為：

  var hello = window.setTimeout(function(){
            alert('你好');
        },5000);
        var btn = document.querySelector('button');
        btn.addEventListener('click',function(){
            window.clearTimeout(hello);
        })

執行效果為：

在這裡插入圖片描述

可以看到，當我們沒有點選停止按鈕的時候，五秒鐘後彈出‘你好'，重新整理頁面後，當我們點選按鈕後，不論過多久，都不會有彈窗，清除定時器成功。

三、setInterval() 定時器

我們再來看看另一種定時器。

window.setInterval(回撥函式,[間隔的毫秒數]);

setInterval()方法重複呼叫一個函式，每隔這個時間，就去呼叫一次回撥函式。

window 可以省略。
這個呼叫函式可以直接寫函式，或者寫函式名或者採取字串 ‘函式名()' 三種形式。
間隔的毫秒數省略預設是 0，如果寫，必須是毫秒，表示每隔多少毫秒就自動呼叫這個函式。
我們經常給定時器賦值一個識別符號。
第一次執行也是間隔毫秒數之後執行，之後每隔毫秒數就執行一次。

舉個例子：

我們來寫一個定時器，讓其每隔一秒就列印一個‘你好'，程式碼為：

  setInterval(function(){
            console.log('你好')
        },1000);

執行效果為：

在這裡插入圖片描述

四、清除setInterval() 定時器

同樣的，我們也可以清除setInterval() 定時器的效果，語法為：

window.clearInterval(intervalID);

clearInterval()方法取消了先前通過呼叫 setInterval()建立的定時器。

注意XssVSHahQk：

window 可以省略。

裡面的引數就是定時器的識別符號。

比如我們現在有兩個按鈕，點選一個可以開啟定時器，點選另一個可以清除該定時器，操作方法為：

<body>
    <button class='begin'>開始</button>
    <button class='stop'>停止</button>
    <script>
        var btn = document.querySelectorAll('button');
        var timer = null;
        btn[0].addEventListener('click',function(){
            timer = setInterval(function(){
                console.log('你好');
            },1000)
        })
        btn[1].addEventListener('click',function(){
    XssVSHahQk        clearInterval(timer)
        })
</script>
</body>

執行效果為：

在這裡插入圖片描述

五、電子時鐘案例

我們現在就可以做一個電子時鐘，顯示當前的年月日時分秒，並讓他們自動變化，程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 500px;
            margin: 100px auto;
            font-size: 25px;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        var div = document.querySelector('div');
        function showTime(){
         http://www.cppcns.com   var date = new Date();
            var y = date.getFullYear();
            var m = date.getMonth()+1;
            m = m>=10?m:'0'+m;
            var d = date.getDate();
            d = d>=10?d:'0'+d;
            var h = date.getHours();
            h = h>=10?h:'0'+h;
            var dm = date.getMinutes();
            dm = dm>=10?dm:'0'+dm;
            var ds = date.getSeconds();
            ds = ds>=10?ds:'0'+ds;
            var str = y+'年'+m+'月'+d+'日  '+h+'時'+dm +'分'+ds+'秒';
            div.innerHTML = str;
            setTimeout(showTime,1000);
        }
        window.onload = showTime();
    </script>
</body>
</html>

執行效果為：

在這裡插入圖片描述