欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript setInterval()與setTimeout()計時器

 更新時間:2019年12月27日 09:38:18   作者:冷月花魂  
這篇文章主要介紹了JavaScript setInterval()與setTimeout()計時器,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

  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í)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評論