本篇內(nèi)容介紹了“JavaScript定時(shí)器如何實(shí)現(xiàn)”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

成都創(chuàng)新互聯(lián)公司科技有限公司專業(yè)互聯(lián)網(wǎng)基礎(chǔ)服務(wù)商，為您提供內(nèi)江機(jī)房主機(jī)托管，高防物理服務(wù)器租用，成都IDC機(jī)房托管，成都主機(jī)托管等互聯(lián)網(wǎng)服務(wù)。

一、 setTimeout() 定時(shí)器

語法：

window.setTimeout(調(diào)用函數(shù), [延遲的毫秒數(shù)]);

setTimeout()方法用于設(shè)置一個(gè)定時(shí)器，該定時(shí)器在定時(shí)器到期后執(zhí)行調(diào)用函數(shù)。
例如：寫一個(gè)頁面，讓其五秒鐘后彈出‘你好'。

代碼如下：

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

運(yùn)行結(jié)果為：

需要注意的是：

• window 可以省略。

• 這個(gè)調(diào)用函數(shù)可以直接寫函數(shù)，或者寫函數(shù)名或者采取字符串‘函數(shù)名()'三種形式。

• 延遲的毫秒數(shù)省略默認(rèn)是 0，如果寫，必須是毫秒。setTimeout() 這個(gè)調(diào)用函數(shù)我們也稱為回調(diào)函數(shù)callback，普通函數(shù)是按照代碼順序直接調(diào)用。而這個(gè)函數(shù)，需要等待時(shí)間，時(shí)間到了才去調(diào)用這個(gè)函數(shù)，因此稱為回調(diào)函數(shù)。

二、停止 setTimeout() 定時(shí)器

當(dāng)我們創(chuàng)建了一個(gè)定時(shí)器的話，如果我們想要將其取消，應(yīng)該怎樣操作呢？就用到了清除定時(shí)器的函數(shù)，如下：

window.clearTimeout(timeoutID)

clearTimeout()方法取消了先前通過調(diào)用 setTimeout()建立的定時(shí)器。
這里面window 可以省略，并且里面的參數(shù)就是定時(shí)器的標(biāo)識(shí)符 。

舉個(gè)例子：

就上述案列，如果我們想要在指定事件前停止它，可以先添加一個(gè)點(diǎn)擊按鈕，給這個(gè)按鈕添加清除定時(shí)器的事件，操作為：

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

運(yùn)行效果為：

可以看到，當(dāng)我們沒有點(diǎn)擊停止按鈕的時(shí)候，五秒鐘后彈出‘你好'，刷新頁面后，當(dāng)我們點(diǎn)擊按鈕后，不論過多久，都不會(huì)有彈窗，清除定時(shí)器成功。

三、setInterval() 定時(shí)器

我們?cè)賮砜纯戳硪环N定時(shí)器。

window.setInterval(回調(diào)函數(shù), [間隔的毫秒數(shù)]);

setInterval()方法重復(fù)調(diào)用一個(gè)函數(shù)，每隔這個(gè)時(shí)間，就去調(diào)用一次回調(diào)函數(shù)。

• window 可以省略。

• 這個(gè)調(diào)用函數(shù)可以直接寫函數(shù)，或者寫函數(shù)名或者采取字符串 ‘函數(shù)名()' 三種形式。

• 間隔的毫秒數(shù)省略默認(rèn)是 0，如果寫，必須是毫秒，表示每隔多少毫秒就自動(dòng)調(diào)用這個(gè)函數(shù)。

• 我們經(jīng)常給定時(shí)器賦值一個(gè)標(biāo)識(shí)符。

• 第一次執(zhí)行也是間隔毫秒數(shù)之后執(zhí)行，之后每隔毫秒數(shù)就執(zhí)行一次。

舉個(gè)例子：

我們來寫一個(gè)定時(shí)器，讓其每隔一秒就打印一個(gè)‘你好'，代碼為：

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

運(yùn)行效果為：

四、清除setInterval() 定時(shí)器

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

window.clearInterval(intervalID);

 clearInterval()方法取消了先前通過調(diào)用 setInterval()建立的定時(shí)器。

注意：

• window 可以省略。

• 里面的參數(shù)就是定時(shí)器的標(biāo)識(shí)符 。

比如我們現(xiàn)在有兩個(gè)按鈕，點(diǎn)擊一個(gè)可以開啟定時(shí)器，點(diǎn)擊另一個(gè)可以清除該定時(shí)器，操作方法為：

    開始
    停止
    

運(yùn)行效果為：

五、電子時(shí)鐘案例

我們現(xiàn)在就可以做一個(gè)電子時(shí)鐘，顯示當(dāng)前的年月日時(shí)分秒，并讓他們自動(dòng)變化，代碼如下：

運(yùn)行效果為：

“JavaScript定時(shí)器如何實(shí)現(xiàn)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！