前幾天學了js，看到了兩個非常有趣的函數，他們分別是setTimeout函數和setInterval函數，這兩個函數能使網頁呈現非常一些網頁中比較常見的效果，比如說圖片輪播，等一些非常好玩的效果。下面就來一起來了解這兩個函數吧！
一setTimeout函數和setInterval函數的語法以及應用
1.setTimeout函數
定義和用法:setTimeout()方法用于在指定的毫秒數后調用函數或計算表達式。
語法:setTimeout(code,millisec);
參數：
code （必需）：要調用的函數后要執行的 JavaScript 代碼串。
millisec（必需）：在執行代碼前需等待的毫秒數。
提示：
setTimeout() 只執行 code 一次。如果要多次調用，請使用 setInterval() 或者讓 code 自身再次調用 setTimeout()。
返回值
一個可以傳遞給 Window.clearTimeout() 從而取消對 code 的周期性執行的值。
既然setTimeout是一個定時器函數，那么就有一個一個函數來清理定時器，那我們就用到了clearTimeout函數。
clearTimeout（setTimeout（）返回的ID值）；
2.setInterval定義
setInterval() 方法可按照指定的周期（以毫秒計）來調用函數或計算表達式。
setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數。
語法
setInterval(code,millisec[,"lang"])；
參數code必需。要調用的函數或要執行的代碼串。
millisec必須。周期性執行或調用 code 之間的時間間隔，以毫秒計
返回值
一個可以傳遞給 Window.clearInterval() 從而取消對 code 的周期性執行的值。
既然setTimeout是一個定時器函數，那么就有一個一個函數來清理定時器，那我們就用到了clearInterval()函數。
clearInterval()（setInterval（）返回的ID值）；
二.案例：
倒計時效果
<!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/ecmascript"> //使用js方式實現倒計時效果 var t1; window.onload = function () { //01定位到開始按鈕返回一個dom對象 var btns = document.getElementById('btnStart'); //02.給開始按鈕注冊單擊事件 btns.onclick = function () { //執行ssetInerval函數第一個參數要定時執行的函數，第二個參數該函數每個多少毫秒執行一次 t1= setInterval(start, 1000); } //03定位到停止按鈕返回一個dom對象 var btnst = document.getElementById('btnStop'); btnst.onclick = function () { clearInterval(t1); } } //要隔1秒執行的函數 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;//定義初始變量默認為第一張圖片 window.onload = function () { //使用定時器函數每隔一秒定義執行一次show函數 setInterval(show,1000); } //要執行的函數 function show() { //如果圖片到達最后一張（5張），就將下一張顯示的圖片改為第一張，如果沒有到達最后一張就將顯示下一張圖片 if (count > 5) { count = 1; } else { count++; } //獲取id為myimg的dom對象 var dom = document.getElementById("myimg"); //改變img標簽的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>點名器
<!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 data = ['張三', '李四', '王二', '小陳', '小張']; var i = 0;//聲明一個初始變量默認讓第一個人顯示在頁面上 var t1; window.onload = function () { //02.獲取開始點名按鈕的dom對象給該對象注冊單擊事件 var dom = document.getElementById("mybtn"); dom.onclick = function () { //使用setInterval函數隔500毫秒調用一次result函數 t1 = setInterval(start, 500); //該方法隔6秒他只調用一次 setTimeout(stop,6000); } //定義一個匿名函數把他賦值給一個變量result var start= function() { //03獲取h1標簽對象，給h1標簽的文本賦值 var domh = document.getElementById("myh1"); domh.innerText = data[i % data.length];//替換已存在，元素值 i++; } //調用匿名函數 start(); var stop = function () { //清除定時器 clearInterval(t1); //彈出提示框點到的同學請作答 alert("請" + document.getElementById("myh1").innerText+"同學作答"); } }</script></head><body> <h1 id="myh1"></h1><button id="mybtn"> 開始點名</button></body></html>通過上面的幾個案例，我相信大家一點對這兩個函數應該不陌生了。
以上這篇深入理解setTimeout函數和setInterval函數就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
