快捷導(dǎo)航

javascript的setTimeout()使用方法總結(jié)

更新時(shí)間：2021年11月19日 10:47:45 作者：Aaron

這篇文章主要給大家分享javascript的setTimeout()使用方法總結(jié)，js的setTimeout方法用處比較多，通常用在頁面刷新了、延遲執(zhí)行了等等，下面我們一起來看看文章對該內(nèi)容的具體總結(jié)吧,需要的朋友可以參考一下

1、前言

js的setTimeout方法用處比較多，通常用在頁面刷新了、延遲執(zhí)行了等等。但是很多javascript新手對setTimeout的用法還是不是很了解。雖然我學(xué)習(xí)和應(yīng)用javascript已經(jīng)兩年多了，但是對setTimeout方法，有時(shí)候也要查閱資料。今天對js的setTimeout方法做一個(gè)系統(tǒng)地總結(jié)。

2、setInterval與setTimeout的區(qū)別

說道setTimeout，很容易就會(huì)想到setInterval，因?yàn)檫@兩個(gè)用法差不多，但是又有區(qū)別，今天一起總結(jié)了吧！

3、setTimeout

定義和用法: setTimeout()方法用于在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式?！　?/p>

語法: setTimeout(code,millisec) 　

參數(shù)： code （必需）：要調(diào)用的函數(shù)后要執(zhí)行的 JavaScript 代碼串。millisec（必需）：在執(zhí)行代碼前需等待的毫秒數(shù)。　

提示： setTimeout() 只執(zhí)行 code 一次。如果要多次調(diào)用，請使用 setInterval() 或者讓 code 自身再次調(diào)用 setTimeout()。

setInterval：

setInterval() 方法可按照指定的周期（以毫秒計(jì)）來調(diào)用函數(shù)或計(jì)算表達(dá)式。

setInterval() 方法會(huì)不停地調(diào)用函數(shù)，直到 clearInterval() 被調(diào)用或窗口被關(guān)閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數(shù)。

語法: setInterval(code,millisec[,"lang"])

參數(shù): code 必需。要調(diào)用的函數(shù)或要執(zhí)行的代碼串。millisec 必須。周期性執(zhí)行或調(diào)用 code 之間的時(shí)間間隔，以毫秒計(jì)。

返回值: 一個(gè)可以傳遞給 Window.clearInterval() 從而取消對 code 的周期性執(zhí)行的值。

區(qū)別：

通過上面可以看出，setTimeout和setinterval的最主要區(qū)別是：

setTimeout只運(yùn)行一次，也就是說設(shè)定的時(shí)間到后就觸發(fā)運(yùn)行指定代碼，運(yùn)行完后即結(jié)束。如果運(yùn)行的代碼中再次運(yùn)行同樣的setTimeout命令，則可循環(huán)運(yùn)行。（即要循環(huán)運(yùn)行，需函數(shù)自身再次調(diào)用 setTimeout() ）

而 setinterval是循環(huán)運(yùn)行的，即每到設(shè)定時(shí)間間隔就觸發(fā)指定代碼。這是真正的定時(shí)器。

setinterval使用簡單，而setTimeout則比較靈活，可以隨時(shí)退出循環(huán)，而且可以設(shè)置為按不固定的時(shí)間間隔來運(yùn)行，比如第一次1秒，第二次2秒，第三次3秒。

我個(gè)人而言，更喜歡用setTimeout多一些！

4、setTimeout的用法

讓我們一起來運(yùn)行一個(gè)案例，首先打開記事本，將下面代碼貼入，運(yùn)行一下效果！

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<h1> <font color=blue> haorooms博客示范網(wǎng)頁 </font> </h1>
<p> 請等三秒!</p>

<script>
setTimeout("alert('對不起, haorooms博客要你等候多時(shí)')", 3000 )
</script>

</body> 
</html>

頁面會(huì)在停留三秒之后彈出對畫框！這個(gè)案例應(yīng)用了setTimeout最基本的語法，setTimeout不會(huì)自動(dòng)重復(fù)執(zhí)行！

setTimeout也可以執(zhí)行function，還可以不斷重復(fù)執(zhí)行！

我們再來一起做一個(gè)案例：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
var x = 0
function countSecond()
{
   x = x+1
　 document.haorooms.haoroomsinput.value=x
　 setTimeout("countSecond()", 1000)
}
</script>
</head>
<html>
<body>

<form name="haorooms">
   <input type="text" name="haoroomsinput"value="0" size=4 >
</form>

<script>
countSecond()
</script>

</body> </html>

我們可以看到input文本框中的數(shù)字在一秒一秒的遞增！所以，setTimeout也可以制作網(wǎng)頁中的時(shí)間跳動(dòng)！

沒有案例，學(xué)習(xí)起來不會(huì)很快，我們再來一起做一個(gè)例子，計(jì)算你在haorooms某個(gè)頁面的停留時(shí)間：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
x=0
y=-1
function countMin()
{　y=y+1
　 document.displayMin.displayBox.value=y
　 setTimeout("countMin()",60000)
}
function countSec()
{　x = x + 1
　 z =x % 60
　 document.displaySec.displayBox.value=z
　 setTimeout("countSec()", 1000)
}
</script> </head>
<body>
<table> <tr valign=top> <td> 你在haorooms博客中的停留時(shí)間是: </td>
<td> 
<form name=displayMin>
   <input type=text name=displayBox value=0 size=4 >
</form> 
</td>
<td> 分 </td>
<td> 
<form name=displaySec> </td>
<td> <input type=text name=displayBox value=0 size=4 >
</form>
 </td>
<td> 秒。</td> </tr>
 </table>
<script>
countMin()
countSec()
</script>
</body>
</html>

怎么樣，通過上面的例子，對setTimeout（）的用法，相信你都了解了吧！

5、clearTimeout( )

我們再來一起看一下 clearTimeout( ) ，

clearTimout( ) 有以下語法 : 　

clearTimeout(timeoutID)

要使用 clearTimeout( ) , 我們設(shè)定 setTimeout( ) 時(shí) , 要給予這 setTimout( ) 一個(gè)名稱 , 這名稱就是 timeoutID , 我們叫停時(shí) , 就是用這 timeoutID 來叫停 , 這是一個(gè)自定義名稱 , 但很多人就以 timeoutID 為名。

在下面的例子 , 設(shè)定兩個(gè) timeoutID, 分別命名為 meter1 及 meter2,

如下 :

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

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

下面請看 clearTimeout()的案例;

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<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> 
<p> </br>
<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>
<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>