JavaScript定時器原理詳解
前言：
在很多頁面中，我們都可以看到一些倒計時或者和時間相關的效果，今天小熊將就JavaScript里面的倒計時做一概述。
首先，我們先來看看定時器，在JS中，有兩種定時器：
一、 setTimeout() 定時器
語法：
window.setTimeout(調(diào)用函數(shù), [延遲的毫秒數(shù)]);
setTimeout()方法用于設置一個定時器，該定時器在定時器到期后執(zhí)行調(diào)用函數(shù)。
例如：寫一個頁面，讓其五秒鐘后彈出‘你好’。
代碼如下：
window.setTimeout(function(){
alert('你好');
},5000);
運行結果為：
需要注意的是：
window可以省略。- 這個調(diào)用函數(shù)可以直接寫函數(shù)，或者寫函數(shù)名或者采取字符串‘函數(shù)名()'三種形式。
- 延遲的毫秒數(shù)省略默認是 0，如果寫，必須是毫秒。
setTimeout()這個調(diào)用函數(shù)我們也稱為回調(diào)函數(shù)callback，普通函數(shù)是按照代碼順序直接調(diào)用。而這個函數(shù)，需要等待時間，時間到了才去調(diào)用這個函數(shù)，因此稱為回調(diào)函數(shù)。
二、停止 setTimeout() 定時器
當我們創(chuàng)建了一個定時器的話，如果我們想要將其取消，應該怎樣操作呢？就用到了清除定時器的函數(shù)，如下：
window.clearTimeout(timeoutID)
clearTimeout()方法取消了先前通過調(diào)用 setTimeout()建立的定時器。
這里面window 可以省略，并且里面的參數(shù)就是定時器的標識符 。
舉個例子：
就上述案列，如果我們想要在指定事件前停止它，可以先添加一個點擊按鈕，給這個按鈕添加清除定時器的事件，操作為：
var hello = window.setTimeout(function(){
alert('你好');
},5000);
var btn = document.querySelector('button');
btn.addEventListener('click',function(){
window.clearTimeout(hello);
})
運行效果為：
可以看到，當我們沒有點擊停止按鈕的時候，五秒鐘后彈出‘你好’，刷新頁面后，當我們點擊按鈕后，不論過多久，都不會有彈窗，清除定時器成功。
三、setInterval() 定時器
我們再來看看另一種定時器。
window.setInterval(回調(diào)函數(shù), [間隔的毫秒數(shù)]);
setInterval()方法重復調(diào)用一個函數(shù)，每隔這個時間，就去調(diào)用一次回調(diào)函數(shù)。
- window 可以省略。
- 這個調(diào)用函數(shù)可以直接寫函數(shù)，或者寫函數(shù)名或者采取字符串 ‘函數(shù)名()’ 三種形式。
- 間隔的毫秒數(shù)省略默認是 0，如果寫，必須是毫秒，表示每隔多少毫秒就自動調(diào)用這個函數(shù)。
- 我們經(jīng)常給定時器賦值一個標識符。
- 第一次執(zhí)行也是間隔毫秒數(shù)之后執(zhí)行，之后每隔毫秒數(shù)就執(zhí)行一次。
舉個例子：
我們來寫一個定時器，讓其每隔一秒就打印一個‘你好’，代碼為：
setInterval(function(){
console.log('你好')
},1000);
運行效果為：
四、清除setInterval() 定時器
同樣的，我們也可以清除setInterval() 定時器的效果，語法為：
window.clearInterval(intervalID);
clearInterval()方法取消了先前通過調(diào)用 setInterval()建立的定時器。
注意：
- window 可以省略。
- 里面的參數(shù)就是定時器的標識符 。
比如我們現(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)在就可以做一個電子時鐘，顯示當前的年月日時分秒，并讓他們自動變化，代碼如下：
<!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>
運行效果為：
到此這篇關于JavaScript定時器原理的文章就介紹到這了,更多相關JavaScript定時器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
日常開發(fā)中寫的 JavaScript 代碼,會用到ES6的部分新特性,所以下面這篇文章主要給大家介紹了關于ES6新特性最常用的知識點,文章總結的非常全面,需要的朋友可以參考下2021-11-11
這篇文章主要為大家詳細介紹了JS實現(xiàn)圖片數(shù)字時鐘，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
最近，同事在做一個項目的時候，有個需求，需要一款動畫庫來支持2012-02-02
用jscript實現(xiàn)列出安裝的軟件列表...2007-06-06
這篇文章主要為大家詳細介紹了10行代碼實現(xiàn)微信小程序滑動tab切換效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
爬蟲進階-JS自動渲染之Scrapy_splash組件的使用
Splash是一個Javascript渲染服務。它是一個實現(xiàn)了HTTP API的輕量級瀏覽器，Splash是用Python和Lua語言實現(xiàn)的，基于Twisted和QT等模塊構建，今天重點給大家介紹js Scrapy_splash組件使用教程，一起看看吧2021-09-09
放大鏡大家在各大網(wǎng)站都能見到，下面小編給大家分享一段 ，代碼是基于原生js實現(xiàn)的放大鏡效果，代碼簡單易懂，非常不錯，具有參考借鑒價值，感興趣的朋友一起看看吧2016-10-10
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)人臉識別，實現(xiàn)添加信息和上傳照片功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-05-05
在JavaScript中，undefined和null是兩個特殊的值，用于表示缺失或空值，文章通過代碼示例詳細介紹undefined與null作用及使用方法，感興趣的同學可以借鑒一下2023-05-05
js querySelector和getElementById通過id獲取元素的區(qū)別
這是sina同事xiaoniu發(fā)現(xiàn)的，querySelector和getElementById通過id獲取元素的區(qū)別2012-04-04