setInterval()、clearInterval()、setTimeout()和clearTimeout()js計數器方法

時間 2019-11-30

標籤 setinterval clearinterval settimeout cleartimeout 計數器方法欄目 JavaScript 简体版

原文原文鏈接

原文地址：http://caibaojian.com/setinterval-settimeout.htmljavascript

window.setInterval()方法html

介紹

週期性地調用一個函數(function)或者執行一段代碼。java

語法

var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
var intervalID = window.setInterval(code, delay);

這裏函數

intervalID 是此重複操做的惟一辨識符，能夠做爲參數傳給clearInterval()。
func 是你想要重複調用的函數。
code 是另外一種語法的應用，是指你想要重複執行的一段字符串構成的代碼(使用該語法是不推薦的，不推薦的緣由和eval()同樣)。
delay 是每次延遲的毫秒數 (一秒等於1000毫秒)，函數的每次調用會在該延遲以後發生。和setTimeout同樣，實際的延遲時間可能會稍長一點。

須要注意的是,IE不支持第一種語法中向延遲函數傳遞額外參數的功能.若是你想要在IE中達到一樣的功能,你必須使用一種兼容代碼 (查看callback arguments 一段).ui

示例

例１：基本用法

var intervalID = window.setInterval(animate, 500);

例２：兩種顏色的切換

下面的例子裏會每隔一秒就調用函數flashtext()一次，直至你經過按下Stop按鈕來清除本次重複操做的惟一辨識符intervalID。spa

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>setInterval/clearInterval example</title>
<script type="text/javascript">
var nIntervId;

function changeColor() {
  nIntervId = setInterval(flashText, 500);
}

function flashText() {
  var oElem = document.getElementById("my_box");
  oElem.style.color = oElem.style.color == "red" ? "blue" : "red";
}

function stopTextColor() {
  clearInterval(nIntervId);
}
</script>
</head>

<body onload="changeColor();">
<div id="my_box">
<p>Hello World</p>
</div>
<button onclick="stopTextColor();">Stop</button>
</body>
</html>

window.clearInterval()方法code

概述

取消掉用setInterval設置的重複執行動做.htm

語法

window.clearInterval(intervalID)

intervalID是你想要取消的重複動做的ID,這個ID是個整數,是由setInterval()返回的.ip

window.setTimeout方法作用域

概述

在指定的延遲時間以後調用一個函數或者執行一個代碼片斷.

語法

var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);
var timeoutID = window.setTimeout(code, delay);

說明:

timeoutID 是該延時操做的數字ID, 此ID隨後能夠用來做爲window.clearTimeout方法的參數.
func 是你想要在delay毫秒以後執行的函數.
code 在第二種語法,是指你想要在delay毫秒以後執行的代碼 (使用該語法是不推薦的, 不推薦的緣由和eval()同樣)
delay 是延遲的毫秒數 (一秒等於1000毫秒),函數的調用會在該延遲以後發生.可是實際的延遲時間可能會稍長一點,查看下面的備註.

須要注意的是,IE不支持第一種語法中向延遲函數傳遞額外參數的功能.若是你想要在IE中達到一樣的功能,你必須使用一種兼容代碼 (查看callback arguments 一段).

備註

你可使用 window.clearTimeout()來取消延遲操做.

若是你但願你的代碼被重複的調用 (好比每 N 毫秒一次),考慮使用window.setInterval().

傳遞字符串字面量

向setTimeout()傳遞一個字符串而不是函數會遭受到與使用eval同樣的風險.

// 推薦
window.setTimeout(function() {
    alert("Hello World!");
}, 500);

// 不推薦
window.setTimeout("alert("Hello World!");", 500);

字符串會在全局做用域內被解釋執行,因此當setTimeout()函數執行完畢後,字符串中的變量不可用.

setTimeout()方法是在等待指定時間後執行函數, 且只執行一次傳入的句柄函數. setInterval()方法是每指定間隔時間後執行一次傳入的句柄函數,循環執行直相當閉窗口或clearInterval().

<!Doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>setInterval</title>
</head>
<body>
<p>點擊按鈕查看效果(2s後彈出): <input type="button" value="setTimeout" /> <input type="button" value="clearTimeout" /></p>
<p>點擊按鈕查看效果(每2s彈出):<input type="button" value="setInterval" /> <input type="button" value="clearInterval" /></p>
<div id="ul1">
<input type="text" id="clock" size="35"/>
<button onclick="window.clearInterval(c)">stop Interval</button>
</div>
<script type="text/javascript">
var c = self.setInterval("clock()",50);
function clock(){
var t = new Date();
document.getElementById("clock").value=t;
}
var timeout=function(){
alert('等待2s後彈出,僅此一次!在等待時間內clearTimeout可中止執行!')
}
var interval=function(){
alert('每2s循環彈出,直至clearInterval或關閉窗口!')
}
var input=document.getElementsByTagName('input');
console.log(input.length);
var clearTimeoutFun=null;
var clearIntervalFun=null;

input[0].onclick=function(){
clearTimeoutFun=setTimeout(timeout,2000);
}
input[1].onclick=function(){
clearTimeout(clearTimeoutFun);
}
input[2].onclick=function(){
clearIntervalFun=setInterval(interval,2000);
}
input[3].onclick=function(){
clearInterval(clearIntervalFun);
}
</script>
</body>
</html>