JavaScript定時器原理詳解
前言：
在很多頁面中，我們都可以看到一些倒計時或者和時間相關(guān)的效果，今天小熊將就JavaScript里面的倒計時做一概述。
首先，我們先來看看定時器，在JS中，有兩種定時器：
一、 setTimeout() 定時器
語法：
window.setTimeout(調(diào)用函數(shù), [延遲的毫秒數(shù)]);
setTimeout()方法用于設(shè)置一個定時器，該定時器在定時器到期后執(zhí)行調(diào)用函數(shù)。
例如：寫一個頁面，讓其五秒鐘后彈出‘你好’。
代碼如下：
window.setTimeout(function(){
alert('你好');
},5000);
運行結(jié)果為：
需要注意的是：
window可以省略。- 這個調(diào)用函數(shù)可以直接寫函數(shù)，或者寫函數(shù)名或者采取字符串‘函數(shù)名()'三種形式。
- 延遲的毫秒數(shù)省略默認(rèn)是 0，如果寫，必須是毫秒。
setTimeout()這個調(diào)用函數(shù)我們也稱為回調(diào)函數(shù)callback，普通函數(shù)是按照代碼順序直接調(diào)用。而這個函數(shù)，需要等待時間，時間到了才去調(diào)用這個函數(shù)，因此稱為回調(diào)函數(shù)。
二、停止 setTimeout() 定時器
當(dāng)我們創(chuàng)建了一個定時器的話，如果我們想要將其取消，應(yīng)該怎樣操作呢？就用到了清除定時器的函數(shù)，如下：
window.clearTimeout(timeoutID)
clearTimeout()方法取消了先前通過調(diào)用 setTimeout()建立的定時器。
這里面window 可以省略，并且里面的參數(shù)就是定時器的標(biāo)識符 。
舉個例子：
就上述案列，如果我們想要在指定事件前停止它，可以先添加一個點擊按鈕，給這個按鈕添加清除定時器的事件，操作為：
var hello = window.setTimeout(function(){
alert('你好');
},5000);
var btn = document.querySelector('button');
btn.addEventListener('click',function(){
window.clearTimeout(hello);
})
運行效果為：
可以看到，當(dāng)我們沒有點擊停止按鈕的時候，五秒鐘后彈出‘你好’，刷新頁面后，當(dāng)我們點擊按鈕后，不論過多久，都不會有彈窗，清除定時器成功。
三、setInterval() 定時器
我們再來看看另一種定時器。
window.setInterval(回調(diào)函數(shù), [間隔的毫秒數(shù)]);
setInterval()方法重復(fù)調(diào)用一個函數(shù)，每隔這個時間，就去調(diào)用一次回調(diào)函數(shù)。
- window 可以省略。
- 這個調(diào)用函數(shù)可以直接寫函數(shù)，或者寫函數(shù)名或者采取字符串 ‘函數(shù)名()’ 三種形式。
- 間隔的毫秒數(shù)省略默認(rèn)是 0，如果寫，必須是毫秒，表示每隔多少毫秒就自動調(diào)用這個函數(shù)。
- 我們經(jīng)常給定時器賦值一個標(biāo)識符。
- 第一次執(zhí)行也是間隔毫秒數(shù)之后執(zhí)行，之后每隔毫秒數(shù)就執(zhí)行一次。
舉個例子：
我們來寫一個定時器，讓其每隔一秒就打印一個‘你好’，代碼為：
setInterval(function(){
console.log('你好')
},1000);
運行效果為：
四、清除setInterval() 定時器
同樣的，我們也可以清除setInterval() 定時器的效果，語法為：
window.clearInterval(intervalID);
clearInterval()方法取消了先前通過調(diào)用 setInterval()建立的定時器。
注意：
- window 可以省略。
- 里面的參數(shù)就是定時器的標(biāo)識符 。
比如我們現(xiàn)在有兩個按鈕，點擊一個可以開啟定時器，點擊另一個可以清除該定時器，操作方法為：
<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(){
clearInterval(timer)
})
</script>
</body>
運行效果為：
五、電子時鐘案例
我們現(xiàn)在就可以做一個電子時鐘，顯示當(dāng)前的年月日時分秒，并讓他們自動變化，代碼如下：
<!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(){
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>
運行效果為：
到此這篇關(guān)于JavaScript定時器原理的文章就介紹到這了,更多相關(guān)JavaScript定時器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
下面小編就為大家?guī)硪黄猨s實時獲取窗口大小變化的實例代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
一文了解JavaScript中call/apply/bind的使用
這篇文章主要介紹了一文了解JavaScript中call/apply/bind的使用，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的朋友可以參考一下2022-07-07
JavaScript累加、迭代、窮舉、遞歸等常用算法實例小結(jié)
這篇文章主要介紹了JavaScript累加、迭代、窮舉、遞歸等常用算法,結(jié)合實例形式分析了javascript累加、迭代、遞推、窮舉等算法的相關(guān)實現(xiàn)技巧與注意事項,需要的朋友可以參考下2018-05-05
這篇文章主要給大家介紹了關(guān)于JavaScript打開本地文件夾的4種方法,JavaScript在前端開發(fā)中是一種使用非常廣泛的編程語言,常用于實現(xiàn)網(wǎng)頁中的交互和動態(tài)效果,需要的朋友可以參考下2023-07-07
URL對于開發(fā)人員來講，應(yīng)該是非常熟悉的東西了吧。這篇文章主要為大家詳細(xì)介紹了JavaScript中更安全的URL讀寫方法，希望對大家有所幫助2023-02-02
解析XML的方法有很多，在本文要為大家介紹下是使用AJAX的JS、JQuery兩種方式來進行解析，具體實現(xiàn)如下，感興趣的朋友可以參考下2013-09-09
javascript實現(xiàn)多張圖片左右無縫滾動效果
本文主要介紹了javascript實現(xiàn)多張圖片左右無縫滾動效果的實例。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要介紹了JavaScript實現(xiàn)表格點擊排序的方法,可實現(xiàn)點擊頂部數(shù)據(jù)項標(biāo)題實現(xiàn)對應(yīng)數(shù)據(jù)列的排序效果,涉及javascript鼠標(biāo)事件及數(shù)據(jù)排序的技巧,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了微信小程序如何播放騰訊視頻的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要介紹了Javascript圖片預(yù)加載，幫助大家理解Javascript圖片預(yù)加載的實現(xiàn)原理，感興趣的小伙伴們可以參考一下2016-02-02