您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“JavaScript定時(shí)器原理是什么”的有關(guān)知識(shí),在實(shí)際案例的操作過程中,不少人都會(huì)遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
語法:
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ù)。
當(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í)器成功。
我們?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í)器的效果,語法為:
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í)器,操作方法為:
<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>
運(yùn)行效果為:
我們現(xiàn)在就可以做一個(gè)電子時(shí)鐘,顯示當(dāng)前的年月日時(shí)分秒,并讓他們自動(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+'時(shí)'+dm +'分'+ds+'秒'; div.innerHTML = str; setTimeout(showTime,1000); } window.onload = showTime(); </script> </body> </html>
運(yùn)行效果為:
“JavaScript定時(shí)器原理是什么”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。