JavaScript setInterval()與setTimeout()計時器
JavaScript是單線程語言,但是它可以通過設置超時值和間歇時間值來指定代碼在特定的時刻執(zhí)行。超時值是指在指定時間之后執(zhí)行代碼,間歇時間值是指每隔指定的時間就執(zhí)行一次代碼。
超時調用
超時調用使用window對象的setTimeout()方法,它接受兩個參數:要執(zhí)行的代碼和以毫秒表示的時間(代碼執(zhí)行前的等待時間)。其中,第一個參數可以是一個字符串(和eval()中使用的字符串一樣),也可以是一個函數。
第二個參數是一個表示等待多長時間的毫秒數,但是在該時間過去后代碼并不一定執(zhí)行。JavaScript是一個單線程序的解釋器,因此一定時間內只能執(zhí)行一段代碼。為了控制要執(zhí)行的代碼,就有一個JavaScript任務隊列。這些任務會按照將它們添加到任務隊列的順序執(zhí)行。setTimeout()的第二個參數告訴JavaScript再過多長時間把當前任務添加到隊列中。如果隊列是空的,那么添加的代碼則會立即執(zhí)行;如果隊列不是空的,那么添加的代碼會在前面的代碼執(zhí)行完畢后再執(zhí)行。
調用setTimeout()之后,該方法會返回一個數值ID,表示超時調用。這個超時調用ID是計劃執(zhí)行代碼的唯一標識符,可以通過它來取消超時調用。取消超時調用使用方法clearTimeout();
間歇調用
間歇調用與超時調用類似,只不過它會按照指定的時間間隔重復執(zhí)行代碼,直至間歇調用被取消或頁面被卸載。設置間歇調用的方法是setInterval(),它接收的參數與setTimeout()相同。取消間歇調用的重要性遠高于超時調用。
但是通常情況下,很少真正使用間歇調用,因為后一個間歇調用可能在前一個間歇調用結束之前調用。因此,我們通常會使用超時調用來模擬間歇調用
下面看兩個小demo:
1、獲得當前日期并讓它顯示在文本框內,點擊“stop”按鈕后事件靜止。(間歇調用)
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()實現(xiàn)計數統(tǒng)計效果,并在文本框中顯示數值。
HTML代碼:
<input type="text" id="count" />
JavaScript代碼:
var num = 0; function startCount(){ document.getElementById("count").value = num; num += 1; setTimeout(startCount,1000); //setTimeout是超時調用,使用遞歸模擬間歇調用 } setTimeout(startCount,1000); //1s后執(zhí)行
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持我們。
上一篇:vue element-ui實現(xiàn)input輸入框金額數字添加千分位
欄 目:JavaScript
下一篇:jstree中的checkbox默認選中和隱藏示例代碼
本文標題:JavaScript setInterval()與setTimeout()計時器
本文地址:http://mengdiqiu.com.cn/a1/JavaScript/9379.html
您可能感興趣的文章
- 04-02javascript潛力,javascript強大嗎
- 04-02javascript點線,點線的代碼
- 04-02javascript移出,js 移入移出
- 04-02javascript替換字符串,js字符串的替換
- 04-02包含javascript舍的詞條
- 04-02javascript匿名,js匿名方法
- 04-02javascript并行,深入理解并行編程 豆瓣
- 04-02javascript警報,JavaScript警告
- 04-02javascript前身,javascript的前身
- 04-02javascript遮蓋,JavaScript遮蓋PC端頁面


閱讀排行
本欄相關
- 04-02javascript點線,點線的代碼
- 04-02javascript潛力,javascript強大嗎
- 04-02javascript替換字符串,js字符串的替換
- 04-02javascript移出,js 移入移出
- 04-02包含javascript舍的詞條
- 04-02javascript并行,深入理解并行編程 豆瓣
- 04-02javascript匿名,js匿名方法
- 04-02javascript警報,JavaScript警告
- 04-02javascript遮蓋,JavaScript遮蓋PC端頁面
- 04-02javascript前身,javascript的前身
隨機閱讀
- 01-10使用C語言求解撲克牌的順子及n個骰子
- 01-11Mac OSX 打開原生自帶讀寫NTFS功能(圖文
- 01-11ajax實現(xiàn)頁面的局部加載
- 08-05DEDE織夢data目錄下的sessions文件夾有什
- 04-02jquery與jsp,用jquery
- 01-10SublimeText編譯C開發(fā)環(huán)境設置
- 01-10C#中split用法實例總結
- 08-05dedecms(織夢)副欄目數量限制代碼修改
- 01-10delphi制作wav文件的方法
- 08-05織夢dedecms什么時候用欄目交叉功能?