JavaScript計(jì)時(shí)器示例分析
1.什么是JavaScript計(jì)時(shí)器?
在JavaScript中,我們可以在設(shè)定的時(shí)間間隔之后來(lái)執(zhí)行代碼,而不是在函數(shù)被調(diào)用后立即執(zhí)行。
2.計(jì)時(shí)器類(lèi)型
一次性計(jì)時(shí)器:僅在指定的延遲時(shí)間之后觸發(fā)一次。
間隔性觸發(fā)計(jì)時(shí)器:每隔一定的時(shí)間間隔就觸發(fā)一次
3.計(jì)時(shí)器方法
1):一次性計(jì)時(shí)器
A):setTimeout(): 指定的延遲時(shí)間之后來(lái)執(zhí)行代碼,進(jìn)執(zhí)行一次
語(yǔ)法:setTimeout(代碼,延遲時(shí)間);
參數(shù)說(shuō)明:
1. 要調(diào)用的函數(shù)或要執(zhí)行的代碼串。
2. 延時(shí)時(shí)間:在執(zhí)行代碼前需等待的時(shí)間,以毫秒為單位(1s=1000ms)。
B):clearTimeout():取消setTimeout()設(shè)置
語(yǔ)法:clearTimeout(timer)
參數(shù)說(shuō)明:
timer:由 setTimeout() 返回的 ID 值。該值標(biāo)識(shí)要取消的延遲執(zhí)行代碼塊。
調(diào)用setTimeout()和clearTimeout()延遲方法:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript計(jì)時(shí)器</title>
<input type="button" value="開(kāi)始" 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)識(shí)要取消的延遲執(zhí)行代碼塊
//開(kāi)始打印
function StartPrint()
{
timer=setTimeout(Print,1000);//調(diào)用計(jì)時(shí)器,延遲1秒打印,只執(zhí)行一次
}
//結(jié)束打印
function StopPrint()
{
clearTimeout(timer);//取消計(jì)時(shí)器
}
</script>
</body>
</html>
調(diào)用setTimeout()和clearTimeout()無(wú)限循環(huán)方法:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript計(jì)時(shí)器</title>
<input type="button" value="開(kāi)始" 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);//開(kāi)始計(jì)時(shí)器,調(diào)用自己,進(jìn)行無(wú)窮循環(huán)
}
var timer;//該值表示要取消延遲執(zhí)行的代碼塊
//開(kāi)始打印
function StartPrint()
{
Print();//調(diào)用打印方法
}
//結(jié)束打印
function StopPrint()
{
clearTimeout(timer);//取消計(jì)時(shí)器
}
</script>
</body>
</html>
2):間隔性觸發(fā)計(jì)時(shí)器
A):setInterval():在執(zhí)行時(shí),從載入頁(yè)面后每隔指定的時(shí)間執(zhí)行代碼
語(yǔ)法:setInterval(代碼,交互時(shí)間);
參數(shù)說(shuō)明:
1. 代碼:要調(diào)用的函數(shù)或要執(zhí)行的代碼串。
2. 交互時(shí)間:周期性執(zhí)行或調(diào)用表達(dá)式之間的時(shí)間間隔,以毫秒計(jì)(1s=1000ms)。
返回值:
一個(gè)可以傳遞給 clearInterval() 從而取消對(duì)"代碼"的周期性執(zhí)行的值。
調(diào)用函數(shù)格式(假設(shè)有一個(gè)clock()函數(shù)):
setInterval("clock()",1000) 或 setInterval(clock,1000)
B):clearInterval() 方法可取消由 setInterval() 設(shè)置的交互時(shí)間
語(yǔ)法:clearInterval(timer)
參數(shù)說(shuō)明:
timer:由 setInterval() 返回的 ID 值。
調(diào)用setInterval()和clearInterval() 執(zhí)行間隔執(zhí)行方法實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript計(jì)時(shí)器</title>
<input type="button" value="開(kāi)始" 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)識(shí)要取消的計(jì)時(shí)器執(zhí)行代碼塊
//開(kāi)始打印
function StartPrint()
{
timer=setInterval("Print()",1000);//開(kāi)始計(jì)時(shí)器
}
//結(jié)束打印
function StopPrint()
{
clearInterval(timer);;//取消計(jì)時(shí)器
}
</script>
</body>
</html>
以上就是本文所述的全部?jī)?nèi)容了,希望小伙伴們能夠喜歡。
- JS 頁(yè)面計(jì)時(shí)器示例代碼
- Node.js中使用計(jì)時(shí)器定時(shí)執(zhí)行函數(shù)詳解
- VB倒計(jì)時(shí)器和JS當(dāng)前時(shí)間
- javascript計(jì)時(shí)器事件使用詳解
- JavaScript分秒倒計(jì)時(shí)器實(shí)現(xiàn)方法
- javascript實(shí)現(xiàn)計(jì)時(shí)器的簡(jiǎn)單方法
- javascript設(shè)計(jì)簡(jiǎn)單的秒表計(jì)時(shí)器
- javascript實(shí)現(xiàn)的簡(jiǎn)單計(jì)時(shí)器
- javascript計(jì)時(shí)器詳解
- 原生js實(shí)現(xiàn)秒表計(jì)時(shí)器功能
相關(guān)文章
JavaScript實(shí)現(xiàn)字符串轉(zhuǎn)JSON對(duì)象的4種方法代碼
這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)字符串轉(zhuǎn)JSON對(duì)象的4種方法,使用ajax的開(kāi)發(fā)項(xiàng)目過(guò)程中,經(jīng)常需要將json格式的字符串返回到前端,前端解析成js對(duì)象(JSON),需要的朋友可以參考下2023-10-10OpenLayers3實(shí)現(xiàn)對(duì)地圖的基本操作
這篇文章主要為大家詳細(xì)介紹了OpenLayers3實(shí)現(xiàn)對(duì)地圖的基本操作,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09nodejs創(chuàng)建web服務(wù)器之hello world程序
本文給大家分享nodejs創(chuàng)建web服務(wù)器之hello world程序,node真的很好用,不僅用v8引擎來(lái)解析了javascript外,還提供了高度優(yōu)化的應(yīng)用庫(kù),真的很好,有需要的朋友一起來(lái)學(xué)習(xí)吧2015-08-08基于Taro的微信小程序模板消息-獲取formId功能模塊封裝實(shí)踐
這篇文章主要介紹了基于Taro的微信小程序模板消息-獲取formId功能模塊封裝實(shí)踐,小程序提供了一種能力-模板消息,基于微信的通知渠道,我們?yōu)殚_(kāi)發(fā)者提供了可以高效觸達(dá)用戶(hù)的模板消息能力,以便實(shí)現(xiàn)服務(wù)的閉環(huán)并提供更佳的體驗(yàn),需要的朋友可以參考下2019-07-07BootStrap 超鏈接變按鈕的實(shí)現(xiàn)方法
這篇文章主要介紹了BootStrap 超鏈接變按鈕的實(shí)現(xiàn)方法以及js按鈕bootstrap超鏈接的操作方法,本文介紹的非常詳細(xì),具有參考借鑒價(jià)值,感興趣的朋友一起看看吧2016-09-09個(gè)人網(wǎng)站留言頁(yè)面(前端jQuery編寫(xiě)、后臺(tái)php讀寫(xiě)MySQL)
這篇文章主要為大家介紹了個(gè)人網(wǎng)站的留言頁(yè)面,前端使用jQuery編寫(xiě)、后臺(tái)利用php簡(jiǎn)單讀寫(xiě)MySQL數(shù)據(jù)庫(kù),感興趣的小伙伴們可以參考一下2016-05-05