JavaScript計時器示例分析
1.什么是JavaScript計時器？
在JavaScript中，我們可以在設定的時間間隔之后來執(zhí)行代碼，而不是在函數(shù)被調用后立即執(zhí)行。
2.計時器類型
一次性計時器：僅在指定的延遲時間之后觸發(fā)一次。
間隔性觸發(fā)計時器：每隔一定的時間間隔就觸發(fā)一次
3.計時器方法
1):一次性計時器
A):setTimeout(): 指定的延遲時間之后來執(zhí)行代碼,進執(zhí)行一次
語法:setTimeout(代碼,延遲時間);
參數(shù)說明：
1. 要調用的函數(shù)或要執(zhí)行的代碼串。
2. 延時時間：在執(zhí)行代碼前需等待的時間，以毫秒為單位（1s=1000ms)。
B):clearTimeout():取消setTimeout()設置
語法:clearTimeout(timer)
參數(shù)說明:
timer：由 setTimeout() 返回的 ID 值。該值標識要取消的延遲執(zhí)行代碼塊。
調用setTimeout()和clearTimeout()延遲方法:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript計時器</title>
<input type="button" value="開始" 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;//該值標識要取消的延遲執(zhí)行代碼塊
//開始打印
function StartPrint()
{
timer=setTimeout(Print,1000);//調用計時器,延遲1秒打印,只執(zhí)行一次
}
//結束打印
function StopPrint()
{
clearTimeout(timer);//取消計時器
}
</script>
</body>
</html>
調用setTimeout()和clearTimeout()無限循環(huán)方法:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript計時器</title>
<input type="button" value="開始" 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);//開始計時器,調用自己,進行無窮循環(huán)
}
var timer;//該值表示要取消延遲執(zhí)行的代碼塊
//開始打印
function StartPrint()
{
Print();//調用打印方法
}
//結束打印
function StopPrint()
{
clearTimeout(timer);//取消計時器
}
</script>
</body>
</html>
2):間隔性觸發(fā)計時器
A):setInterval():在執(zhí)行時,從載入頁面后每隔指定的時間執(zhí)行代碼
語法:setInterval(代碼,交互時間);
參數(shù)說明：
1. 代碼：要調用的函數(shù)或要執(zhí)行的代碼串。
2. 交互時間：周期性執(zhí)行或調用表達式之間的時間間隔，以毫秒計（1s=1000ms）。
返回值:
一個可以傳遞給 clearInterval() 從而取消對"代碼"的周期性執(zhí)行的值。
調用函數(shù)格式(假設有一個clock()函數(shù)):
setInterval("clock()",1000) 或 setInterval(clock,1000)
B):clearInterval() 方法可取消由 setInterval() 設置的交互時間
語法：clearInterval(timer)
參數(shù)說明:
timer：由 setInterval() 返回的 ID 值。
調用setInterval()和clearInterval() 執(zhí)行間隔執(zhí)行方法實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript計時器</title>
<input type="button" value="開始" 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;//該值標識要取消的計時器執(zhí)行代碼塊
//開始打印
function StartPrint()
{
timer=setInterval("Print()",1000);//開始計時器
}
//結束打印
function StopPrint()
{
clearInterval(timer);;//取消計時器
}
</script>
</body>
</html>
以上就是本文所述的全部內容了，希望小伙伴們能夠喜歡。
相關文章
js文本框輸入點回車觸發(fā)確定兼容IE、FF等，下面有個不錯的示例，感興趣的朋友可以參考下2013-11-11
JavaScript之iterable_動力節(jié)點Java學院整理
這篇文章主要介紹了JavaScript之iterable，遍歷Array可以采用下標循環(huán)，遍歷Map和Set就無法使用下標。為了統(tǒng)一集合類型，ES6標準引入了新的iterable類型，Array、Map和Set都屬于iterable類型2017-06-06
這篇文章主要為大家詳細介紹了js+html實現(xiàn)點名系統(tǒng)功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)團購或秒殺批量倒計時，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
JS中的算法與數(shù)據(jù)結構之棧(Stack)實例詳解
這篇文章主要介紹了JS中的算法與數(shù)據(jù)結構之棧(Stack),結合實例形式詳細分析了js中棧的概念、原理、定義及常見使用方法,需要的朋友可以參考下2019-08-08
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡單圖片切換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
這篇文章主要介紹了Python版實現(xiàn)微信公眾號掃碼登陸，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-05
dayjs是一個輕量的處理時間和日期的JavaScript庫,下面這篇文章主要給大家介紹了關于Day.js常用方法的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-03-03
用js實現(xiàn)多域名不同文件的調用方法...2007-01-01
這篇文章主要介紹了微信小程序使用radio顯示單選項功能,涉及針對radio組件事件響應相關操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12