下面小編就為大家?guī)硪黄钊肜斫鈙etTimeout函數(shù)和setInterval函數(shù)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。
前幾天學(xué)了js，看到了兩個非常有趣的函數(shù)，他們分別是setTimeout函數(shù)和setInterval函數(shù)，這兩個函數(shù)能使網(wǎng)頁呈現(xiàn)非常一些網(wǎng)頁中比較常見的效果，比如說圖片輪播，等一些非常好玩的效果。下面就來一起來了解這兩個函數(shù)吧！
一setTimeout函數(shù)和setInterval函數(shù)的語法以及應(yīng)用
1.setTimeout函數(shù)
定義和用法:setTimeout()方法用于在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式。
語法:setTimeout(code,millisec);
參數(shù)：
code （必需）：要調(diào)用的函數(shù)后要執(zhí)行的 JavaScript 代碼串。
millisec（必需）：在執(zhí)行代碼前需等待的毫秒數(shù)?！ ?/P>
提示：
setTimeout() 只執(zhí)行 code 一次。如果要多次調(diào)用，請使用 setInterval() 或者讓 code 自身再次調(diào)用 setTimeout()。
返回值
一個可以傳遞給 Window.clearTimeout() 從而取消對 code 的周期性執(zhí)行的值。
既然setTimeout是一個定時器函數(shù)，那么就有一個一個函數(shù)來清理定時器，那我們就用到了clearTimeout函數(shù)。
clearTimeout（setTimeout（）返回的ID值）；
2.setInterval定義
setInterval() 方法可按照指定的周期（以毫秒計(jì)）來調(diào)用函數(shù)或計(jì)算表達(dá)式。
setInterval() 方法會不停地調(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 之間的時間間隔，以毫秒計(jì)
返回值
一個可以傳遞給 Window.clearInterval() 從而取消對 code 的周期性執(zhí)行的值。
既然setTimeout是一個定時器函數(shù)，那么就有一個一個函數(shù)來清理定時器，那我們就用到了clearInterval()函數(shù)。
clearInterval()（setInterval（）返回的ID值）；
二.案例：
倒計(jì)時效果
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>倒計(jì)時效果</title>
<script type="text/ecmascript">
//使用js方式實(shí)現(xiàn)倒計(jì)時效果
var t1;
window.onload = function () {
//01定位到開始按鈕返回一個dom對象
var btns = document.getElementById('btnStart');
//02.給開始按鈕注冊單擊事件
btns.onclick = function () {
//執(zhí)行ssetInerval函數(shù)第一個參數(shù)要定時執(zhí)行的函數(shù)，第二個參數(shù)該函數(shù)每個多少毫秒執(zhí)行一次
t1= setInterval(start, 1000);
}
//03定位到停止按鈕返回一個dom對象
var btnst = document.getElementById('btnStop');
btnst.onclick = function () {
clearInterval(t1);
}
}
//要隔1秒執(zhí)行的函數(shù)
function start() {
//01.獲取div中的文本賦值給一個變量
var divdom = document.getElementById('msg');
var divnum = divdom.innerText;
//判斷divnum的值是否為0
if (divnum > 0) {
divnum--;
//把減過的值重新賦值給divnum
divdom.innerText = divnum;
}
}
</script>
</head>
<body>
<input type="button" id="btnStart" value="開始" />
<input type="button" id="btnStop" value="停止" /><br />
<div id="msg">10</div>
</body>
</html>
背景圖片切換：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
var count = 1;//定義初始變量默認(rèn)為第一張圖片
window.onload = function () {
//使用定時器函數(shù)每隔一秒定義執(zhí)行一次show函數(shù)
setInterval(show,1000);
}
//要執(zhí)行的函數(shù)
function show() {
//如果圖片到達(dá)最后一張（5張），就將下一張顯示的圖片改為第一張，如果沒有到達(dá)最后一張就將顯示下一張圖片
if (count > 5) {
count = 1;
}
else {
count++;
}
//獲取id為myimg的dom對象
var dom = document.getElementById("myimg");
//改變img標(biāo)簽的src屬性指向，改變圖片
dom.src = "image/"+count+".jpg"
}
</script>
</head>
<body>
<img src="image/1.jpg" alt="Alternate Text" width="200px" height="200px" id="myimg" />
</body>
</html>
點(diǎn)名器:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
//定義一個數(shù)組保存該點(diǎn)名器中的基本數(shù)據(jù)
var data = ['張三', '李四', '王二', '小陳', '小張'];
var i = 0;//聲明一個初始變量默認(rèn)讓第一個人顯示在頁面上
var t1;
window.onload = function () {
//02.獲取開始點(diǎn)名按鈕的dom對象給該對象注冊單擊事件
var dom = document.getElementById("mybtn");
dom.onclick = function () {
//使用setInterval函數(shù)隔500毫秒調(diào)用一次result函數(shù)
t1 = setInterval(start, 500);
//該方法隔6秒他只調(diào)用一次
setTimeout(stop,6000);
}
//定義一個匿名函數(shù)把他賦值給一個變量result
var start= function() {
//03獲取h1標(biāo)簽對象，給h1標(biāo)簽的文本賦值
var domh = document.getElementById("myh1");
domh.innerText = data[i % data.length];//替換已存在，元素值
i++;
}
//調(diào)用匿名函數(shù)
start();
var stop = function () {
//清除定時器
clearInterval(t1);
//彈出提示框點(diǎn)到的同學(xué)請作答
alert("請" + document.getElementById("myh1").innerText+"同學(xué)作答");
}
}
</script>
</head>
<body>
<h1 id="myh1"></h1>
<button id="mybtn"> 開始點(diǎn)名</button>
</body>
</html>
通過上面的幾個案例，我相信大家一點(diǎn)對這兩個函數(shù)應(yīng)該不陌生了。
以上這篇深入理解setTimeout函數(shù)和setInterval函數(shù)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考
公眾號
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試