JavaScript setInterval()與setTimeout()計時器
JavaScript是單線程語言,但是它可以通過設(shè)置超時值和間歇時間值來指定代碼在特定的時刻執(zhí)行。超時值是指在指定時間之后執(zhí)行代碼,間歇時間值是指每隔指定的時間就執(zhí)行一次代碼。
超時調(diào)用
超時調(diào)用使用window對象的setTimeout()方法,它接受兩個參數(shù):要執(zhí)行的代碼和以毫秒表示的時間(代碼執(zhí)行前的等待時間)。其中,第一個參數(shù)可以是一個字符串(和eval()中使用的字符串一樣),也可以是一個函數(shù)。
第二個參數(shù)是一個表示等待多長時間的毫秒數(shù),但是在該時間過去后代碼并不一定執(zhí)行。JavaScript是一個單線程序的解釋器,因此一定時間內(nèi)只能執(zhí)行一段代碼。為了控制要執(zhí)行的代碼,就有一個JavaScript任務(wù)隊(duì)列。這些任務(wù)會按照將它們添加到任務(wù)隊(duì)列的順序執(zhí)行。setTimeout()的第二個參數(shù)告訴JavaScript再過多長時間把當(dāng)前任務(wù)添加到隊(duì)列中。如果隊(duì)列是空的,那么添加的代碼則會立即執(zhí)行;如果隊(duì)列不是空的,那么添加的代碼會在前面的代碼執(zhí)行完畢后再執(zhí)行。
調(diào)用setTimeout()之后,該方法會返回一個數(shù)值ID,表示超時調(diào)用。這個超時調(diào)用ID是計劃執(zhí)行代碼的唯一標(biāo)識符,可以通過它來取消超時調(diào)用。取消超時調(diào)用使用方法clearTimeout();
間歇調(diào)用
間歇調(diào)用與超時調(diào)用類似,只不過它會按照指定的時間間隔重復(fù)執(zhí)行代碼,直至間歇調(diào)用被取消或頁面被卸載。設(shè)置間歇調(diào)用的方法是setInterval(),它接收的參數(shù)與setTimeout()相同。取消間歇調(diào)用的重要性遠(yuǎn)高于超時調(diào)用。
但是通常情況下,很少真正使用間歇調(diào)用,因?yàn)楹笠粋€間歇調(diào)用可能在前一個間歇調(diào)用結(jié)束之前調(diào)用。因此,我們通常會使用超時調(diào)用來模擬間歇調(diào)用
下面看兩個小demo:
1、獲得當(dāng)前日期并讓它顯示在文本框內(nèi),點(diǎn)擊“stop”按鈕后事件靜止。(間歇調(diào)用)
HTML代碼:
<input type="text" size="50" id="clock" /> <input type="button" value="Stop" id="btn" />
JavaScript代碼:
function clock(){ var time = new Date(); document.getElementById("clock").value = time; var btn =document.getElementById("btn"); btn.onclick = function(){ clearInterval(t); } } var t = setInterval(clock,1000);
2、使用setTimeou()實(shí)現(xiàn)計數(shù)統(tǒng)計效果,并在文本框中顯示數(shù)值。
HTML代碼:
<input type="text" id="count" />
JavaScript代碼:
var num = 0; function startCount(){ document.getElementById("count").value = num; num += 1; setTimeout(startCount,1000); //setTimeout是超時調(diào)用,使用遞歸模擬間歇調(diào)用 } setTimeout(startCount,1000); //1s后執(zhí)行
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Js中setTimeout()和setInterval() 何時被調(diào)用執(zhí)行的用法
- JavaScript定時器setTimeout()和setInterval()詳解
- 精解window.setTimeout()&window.setInterval()使用方式與參數(shù)傳遞問題!
- setInterval()和setTimeout()的用法和區(qū)別示例介紹
- setTimeout()與setInterval()方法區(qū)別介紹
- JavaScript中定時器setTimeout()和setInterval()的用法
- JavaScript中setInterval()和setTimeout()的用法及區(qū)別
相關(guān)文章
js/ajax跨越訪問-jsonp的原理和實(shí)例(javascript和jquery實(shí)現(xiàn)代碼)
最近做了一個項(xiàng)目,需要用子域名調(diào)用主域名下的一個現(xiàn)有的功能,于是想到了用jsonp來解決,在我們平常的項(xiàng)目中不乏有這種需求的朋友,于是記錄下來以便以后查閱同時也希望能幫到大家,需要了解的朋友可以參考下2012-12-12JavaScript實(shí)現(xiàn)LI列表數(shù)據(jù)綁定的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)LI列表數(shù)據(jù)綁定的方法,可實(shí)現(xiàn)綁定Li列表項(xiàng)對應(yīng)數(shù)值項(xiàng)的功能,涉及javascript鼠標(biāo)onmousemove、onmouseout及onclick等事件的相關(guān)使用技巧,需要的朋友可以參考下2015-08-08js圖片滾動效果時間可隨意設(shè)定當(dāng)鼠標(biāo)移上去時停止
這篇文章主要介紹了js圖片滾動效果時間可隨意設(shè)定當(dāng)鼠標(biāo)移上去時停止,需要的朋友可以參考下2014-06-06每天一篇javascript學(xué)習(xí)小結(jié)(屬性定義方法)
這篇文章主要介紹了javascript中的屬性定義方法知識點(diǎn),對屬性定義方法的基本使用方法,以及各種方法進(jìn)行整理,感興趣的小伙伴們可以參考一下2015-11-11