JS setTimeout()基本用法

時間 2020-04-13

標籤 settimeout 基本用法欄目 JavaScript 简体版

原文原文鏈接

Better Tomorrowphp

在製做網頁動態效果時，可能會遇到須要延時在執行的需求，這時就能夠用到 JS 中定時器來實現此類需求，本文將對setTimeout()作一個用法總結。html

setTimeout() 方法用於在指定的毫秒數後調用函數或計算表達式(以毫秒爲單位)
setTimeout()只執行函數一次，若是須要屢次調用能夠使用setInterval(),或者在函數體內再次調用setTimeout()

setTimeout()用法

舉個簡單的例子瀏覽器

加入下列代碼，在打開的頁面靜候三秒後，彈出警告框「你好」函數

<script>
    setTimeout("alert('你好')", 3000) 
</script>

效果： code

再複雜一些的function定義orm

<script>
var myVar;

function myFunction() {
    myVar = setTimeout(alertFunc, 3000);
}

function alertFunc() {
  alert("Hello!");
}

其效果是同樣的htm

自動每秒加 1 的 function

使用 setTimeout( ) 令文字框的數值每秒就加 1, 固然你也能夠設定其餘遞增的速度, 例如每五秒就加 5, 或每五秒就加 1。blog

<script>
x = 0
function countSecond( )
{　x = x+1
　 document.fm.displayBox.value=x
　 setTimeout("countSecond()", 1000)
}
</script> 
<body bgcolor=lightcyan text=red> <p> </br>
<form name=fm>
<input type="text" name="displayBox"value="0" size=4 >
</form>
<script>
countSecond( )
</script>
</body>

用上述的方法設定時間, setTimeout( ) 雖然設定了是一秒, 但瀏覽器還有另外兩項功能要執行, 因此一個循環的時間是稍多於一秒, 例如一分鐘可能只有58 個循環。ip

延時關閉網頁

按下按鈕，Window open()打開一個網頁，執行命令，三秒鐘後自動關閉get

<button onclick="openWin()">打開 "窗口"</button>

<script>
function openWin() {
    var myWindow = window.open("", "", "width=200, height=100");
    myWindow.document.write("這是一個新窗口");
    setTimeout(function(){ myWindow.close() }, 3000);
}
</script>

取消setTimeout()

當一個 setTimeout( ) 開始了循環的工做, 咱們要使它停下來, 可以使用 clearTimeout( )

<button onclick="myFunction()">點我彈出</button>
<button onclick="myStopFunction()">阻止彈出</button>

<script>
var myVar;

function myFunction() {
    myVar = setTimeout(function(){ alert("Hello") }, 2000);
}

function myStopFunction() {
    clearTimeout(myVar);
}
</script>