亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JavaScript中setTimeout()的具體用法

 更新時(shí)間：2023年04月25日 16:00:18   作者：suwu150  
本文主要介紹了JavaScript中setTimeout()的具體用法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

setTimeout( ) 是屬于 window 的 方法, 但我們都是略去 window 這頂層容器名稱, 這是用來設(shè)定一個(gè)時(shí)間, 時(shí)間到了, 就會(huì)執(zhí)行一個(gè)指定的 method

請(qǐng)先看以下一個(gè)簡(jiǎn)單, 這是沒有實(shí)際用途的例子, 只是用來示范 setTimeout( ) 的語法。

1、setTimeout( ) 語法例子

<html>
<body text=red>
<h1> <font color=blue> 示范網(wǎng)頁 </font> </h1> <p> </br>
<p> 請(qǐng)等三秒鐘!
<script>
setTimeout("alert('對(duì)不起, 三秒鐘已到')", 3000 )
</script>
</body> </html>

2.　留意網(wǎng)頁開啟后三秒, 就會(huì)出現(xiàn)一個(gè) alert 對(duì)話盒。

setTimeout( )是設(shè)定一個(gè)指定等候時(shí)間 (單位是千分之一秒, millisecond), 時(shí)間到了, 瀏覽器就會(huì)執(zhí)行一個(gè)指定的 method 或 function, 有以下語法:

setTimeout(code, milliseconds, param1, param2, ...)
setTimeout(function, milliseconds, param1, param2, ...)

code/function:必需。要調(diào)用一個(gè)代碼串，也可以是一個(gè)函數(shù)。

milliseconds:可選。執(zhí)行或調(diào)用 code/function 需要等待的時(shí)間，以毫秒計(jì)。默認(rèn)為 0。

param1, param2, ... : 可選。 傳給執(zhí)行函數(shù)的其他參數(shù)（IE9 及其更早版本不支持該參數(shù)）。　　

這次例子是設(shè)定等待 3 秒 (3000 milliseconds), 瀏覽器就會(huì)執(zhí)行 alert( ) 這一個(gè)method，注意這個(gè)函數(shù)可以由我們自己重新書寫。下面就來看一看調(diào)用function的方式　

<html>
 <head></head>
 <body text="red"> 
  <h1><font color="blue"> 示范網(wǎng)頁 </font></h1> 
  <script>
// setTimeout("alert('出窗')",3000 );
setTimeout("changeState()",3000 );
function changeState(){
  // alert("彈出");
  let content=document.getElementById('content');
  content.innerHTML="<div>這是三秒鐘之后</div>";
}
</script> 
  <p id="content"> 請(qǐng)等三秒鐘!</p>  
 </body>
</html>

以上這段代碼是實(shí)現(xiàn)一個(gè)在3秒鐘之后進(jìn)行更換文本的內(nèi)容，在更換內(nèi)容的時(shí)候調(diào)用了方法changeState()方法

3、有了以上基礎(chǔ)，我們可以實(shí)現(xiàn)一個(gè)自動(dòng)運(yùn)行的按照時(shí)間遞加的計(jì)數(shù)器，如下面所示代碼：

<html>
<body text=red>
<h1><font color=blue> 示范網(wǎng)頁 </font></h1>
<script>
  var x=0;
 
  function changeState(){
        x=x+1;
        //注意這里的調(diào)用方式，使用引號(hào)包圍
        setTimeout("changeState()",1000 );
        let content=document.getElementById('content');
         content.innerHTML=x;
         console.log(x);
      }
</script>
<button onclick="changeState()">開始計(jì)時(shí)</button>
<p>已運(yùn)行時(shí)間</p>
<p id="content"></p>
</body>
</html>

在上面代碼中，當(dāng)點(diǎn)擊按鈕啟動(dòng)changeState( )后, 就會(huì)啟動(dòng) setTimeout( ), 這個(gè) method 在一秒后又啟動(dòng) changeState( ), changeState( )啟動(dòng)后又啟動(dòng) setTimeout( ) , 所以得出的結(jié)果是 changeState( )每秒執(zhí)行一次，繼而實(shí)現(xiàn)數(shù)值的遞增。

雖然實(shí)現(xiàn)了數(shù)值的遞增，但是當(dāng)我們連續(xù)點(diǎn)擊按鈕時(shí)，你會(huì)發(fā)現(xiàn)，數(shù)值的增加不是按照1秒增加的（小于1秒），下面，我們進(jìn)行一些限制條件，比如限制x<60,然后重新開始，在其他位進(jìn)1，也就是實(shí)現(xiàn)鐘表計(jì)時(shí)功能，如下面代碼：

<html>
<body text=red>
<h1><font color=blue> 示范網(wǎng)頁 </font></h1>
<script>
  var x=00;
  var y=00;
  var z=00;
 
  function changeState(){
    if(x<=59&&x>=0 && y<=59 && y>=0 && z<=59 && z>=0){
      //注意這里的調(diào)用方式，使用引號(hào)包圍
      let content=document.getElementById('content');
       content.innerHTML=z+":"+y+":"+x;
       console.log(x);
        x=x+1;
    }else if(y<=59 && y>=0 && z<=59 && z>=0){
      y=y+1;
      x=0;
    }
    else if (z<=59 && z>=0) {
      z=z+1;
      y=0;
      x=0;
    }
    setTimeout("changeState()",1000 );
  }
</script>
<button onclick="changeState()">開始計(jì)時(shí)</button>
<p>已運(yùn)行時(shí)間</p>
<p id="content"></p>
</body>
</html>

實(shí)現(xiàn)效果如下所示：

3、既然有開始計(jì)時(shí)，那么想當(dāng)然就要有停止計(jì)時(shí)，那么就需要知道這個(gè)函數(shù)------clearTimeout( )

有些好奇寶寶就會(huì)問了，為什么會(huì)有停止呢？什么場(chǎng)景會(huì)需要停止呢？

比如，當(dāng)我們做了某項(xiàng)操作后，而這個(gè)操作會(huì)在幾秒鐘后延遲執(zhí)行，但是我們?cè)陉P(guān)閉頁面后，我們可能就不需要在執(zhí)行這個(gè)操作了，所以我們可以在關(guān)閉頁面或者卸載組件的時(shí)候，將這個(gè)延遲時(shí)間取消掉。

setTimeout( ) 來使到瀏覽器不斷執(zhí)行一個(gè) function, 當(dāng)一個(gè) setTimeout( ) 開始了循環(huán)的工作, 我們要使它停下來, 可使用 clearTimeout( ) 這 method。
clearTimout( ) 有以下語法:　clearTimeout(timeoutID)

要使用 clearTimeout( ), 我們?cè)O(shè)定 setTimeout( ) 時(shí), 要給予這 setTimout( ) 一個(gè)名稱, 這名稱就是 timeoutID , 我們叫停時(shí), 就是用這 timeoutID來叫停, 這是一個(gè)自定義名稱,。
如下:

timeoutID
　↓
meter1 =setTimeout("count1()", 1000)
meter2 =setTimeout("count2()", 1000)

使用這 meter1 及 meter2 這些 timeoutID 名稱, 在設(shè)定 clearTimeout( ) 時(shí), 就可指定對(duì)哪一個(gè) setTimeout( ) 有效, 不會(huì)擾及另一個(gè) setTimeout( ) 的操作。

如下所示，停止的語句（注意：count1(),count2()分別是計(jì)時(shí)開始的方法，而meter1,meter2分別是setTimeout的定義）

<html>
 <head> 
  <script>
x = 0
y = 0
 
function count1( )
{　x = x+ 1
　 document.display1.box1.value= x
　 meter1=setTimeout("count1()", 1000)
}
 
function count2( )
{　y = y+ 1
　 document.display2.box2.value= y
　 meter2=setTimeout("count2()", 1000)
}
</script> 
 </head> 
 <body bgcolor="lightcyantext=red"> 
  <p> <br /> </p>
  <form name="display1"> 
   <input type="text" name="box1" value="0" size="4" /> 
   <input type="button" value="停止計(jì)時(shí)" onclick="clearTimeout(meter1)" /> 
   <input type="button" value="繼續(xù)計(jì)時(shí)" onclick="count1() " /> 
  </form> 
  <p> </p>
  <form name="display2"> 
   <input type="text" name="box2" value="0" size="4" /> 
   <input type="button" value="停止計(jì)時(shí)" onclick="clearTimeout(meter2) " /> 
   <input type="button" value="繼續(xù)計(jì)時(shí)" onclick="count2( ) " /> 
  </form> 
  <script>
count1( )
count2( )
</script>  
 </body>
</html>

4、設(shè)置點(diǎn)擊一次標(biāo)志---　Set flag

前個(gè)練習(xí)說到我們用一個(gè)按鈕來啟動(dòng)一個(gè) function, 每按一下就會(huì)啟動(dòng)這 function 一次, 請(qǐng)看以下例子。

在這例子有以下設(shè)定:
1.　程序開啟時(shí) flag=0。
2.　當(dāng) counter( ) 執(zhí)行時(shí)會(huì)順便將 flag 變?yōu)?1。
3.　在 [繼續(xù)計(jì)時(shí)] 這按鈕的反應(yīng)中, 會(huì)先檢查 flag 是 0 或是 1, 若是 0 就會(huì)產(chǎn)生作用, 若是 1 就沒有反應(yīng)。
4.　使用這 flag 的方式, count( ) 這 function 開啟后, [繼續(xù)計(jì)時(shí)] 這按鈕就沒有作用。

這處的 flag 是一個(gè)變數(shù), 可任意取名, 我們用 flag來稱呼這變數(shù)的原因, 是因?yàn)檫@變數(shù)好處一支旗, 將旗豎起 (flag is on), 就會(huì)產(chǎn)生一個(gè)作用, 將旗放下 (flag is off), 就產(chǎn)生另一個(gè)作用。
練習(xí)---只可開啟一次的 function

這練習(xí)是將上個(gè)練習(xí)加多一個(gè) flag, 使到每次只能有一個(gè) count( ) 這 function 在進(jìn)行。

以下內(nèi)容:

<html>
 <head> 
  <script>
x = 0
flag = 0
function count( )
{　x = x+ 1
　 document.display.box.value= x
　 timeoutID=setTimeout("count()", 1000)
　 flag = 1
}
 
function restart( )
{　if (flag==0)
　　　{　count( )　}
}
</script> 
 </head> 
 <body bgcolor="lightcyantext=red"> 
  <p> <br /> </p>
  <form name="display"> 
   <input type="text" name="box" value="0" size="4" /> 
   <input type="button" value="停止計(jì)時(shí)" 　　onclick="clearTimeout(timeoutID);flag=0" /> 
   <input type="button" value="繼續(xù)計(jì)時(shí)" onclick="restart() " /> 
  </form> 
  <p> <script>
count( )
</script> </p>
  <form> 
   <input type="button" value="Show flag" onclick="alert('The flag now is '+ flag)" /> 
  </form>  
 </body>
</html>

效果說明：

1.　在網(wǎng)頁中, 你應(yīng)該能看到三個(gè)按鈕及文字框中的數(shù)字跳動(dòng)。
2.　請(qǐng)你按 [Show flag]這按鈕, 應(yīng)見到一個(gè)話對(duì)盒顯示 flag 是 1。
3.　請(qǐng)你按 [停止計(jì)時(shí)]這按鈕, 數(shù)字停止跳動(dòng), 請(qǐng)你按 [Show flag] 這按鈕, 應(yīng)見到話對(duì)盒顯示 flag 是 0。
4.　請(qǐng)你按多次 [繼續(xù)計(jì)時(shí)]這按鈕, 你應(yīng)見到數(shù)字不會(huì)加快, 請(qǐng)你按 [Show flag]這按鈕, 應(yīng)見到話對(duì)盒顯示 flag 變回 1。

代碼解析：

1.　這網(wǎng)頁第 5行有這一句: flag=0 , 這是設(shè)定 flag 這變量及將初始值定為 0, 你也可將初始值定為 1, 隨后有關(guān)的 0 和 1 對(duì)調(diào)。
2.　count( ) 這個(gè) function方法中最后一句是 flag=1 , 所以啟動(dòng) count( ) 后, flag的狀態(tài)就會(huì)變?yōu)?1。
3.　[繼續(xù)計(jì)時(shí)] 的按鈕是用來啟動(dòng) restart( ), 這 function 有以下設(shè)定:

function restart( )
{　if (flag==0)
　　　{　count( )　}
}

這里的 if statement 檢查 flag是否等于 0, 若是 0 就啟動(dòng) count(), 若是 1 (即不是 0) 就沒有反應(yīng),使用這方法, 若 count( )已在執(zhí)行中, [繼續(xù)計(jì)時(shí)] 這按鈕不會(huì)有作用。

這處的 flag=1設(shè)定, 實(shí)際設(shè)為 1 或 2 或 3 等數(shù)值都是一樣的,只要不是 0 就可以了, 所以這兩個(gè)相對(duì)的標(biāo)志,看似是 "0" 和 "1", 實(shí)際是"0" 和 "non-zero" (非-0)。

4.　[停止計(jì)時(shí)] 的按鈕有以下設(shè)定:

onClick="clearTimeout(timeoutID);flag=0"

上面代碼是停止 setTimeout( ) 的操作時(shí),同時(shí)將 flag 傳回 0, 這使到restart( ) 這function 可以重新啟動(dòng) count()。

注意:下面方法是定時(shí)作用,能夠按照一定的時(shí)間執(zhí)行相同的操作setInterval

let i =0; setInterval(() => { console.log(i++); },1500);//1000為1秒鐘

在上面代碼中,每隔1.5秒就會(huì)有一次打印,對(duì)于這個(gè)方法,同樣能夠?qū)崿F(xiàn)上面操作中的始終功能,并且代碼更加簡(jiǎn)單.

應(yīng)該值得注意的是: setTimeout 也有個(gè)小細(xì)節(jié)，第二個(gè)參數(shù)設(shè)置為 0 也許會(huì)有人認(rèn)為這樣就不是異步了，其實(shí)還是異步。這是因?yàn)?HTML5 標(biāo)準(zhǔn)規(guī)定這個(gè)函數(shù)第二個(gè)參數(shù)不得小于 4 毫秒，不足會(huì)自動(dòng)增加。

到此這篇關(guān)于JavaScript中setTimeout()的具體用法 的文章就介紹到這了,更多相關(guān)JavaScript setTimeout()內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論