JavaScript setTimeout和setInterval的使用方法說明

更新時(shí)間：2010年03月25日 20:14:55 作者：

兩個(gè)函數(shù)都是可以用來實(shí)現(xiàn)一段時(shí)間后執(zhí)行一段javascript代碼的效果。兩個(gè)函數(shù)都有兩個(gè)參數(shù)，前面的都是執(zhí)行表達(dá)式，后面的是隔的秒數(shù)。

不同的是setInterval會每隔指定的時(shí)間段就執(zhí)行一次代碼，具有重復(fù)性。而setTimeout只會調(diào)用后執(zhí)行一次。
下面通過函數(shù)的建立和函的自動(dòng)刪除來深刻理解兩個(gè)函數(shù)；
1.函數(shù)的建立
setTimeOut的建立：

復(fù)制代碼代碼如下:

 
showTime(); 
function showTime() 
{ 
var today = new Date(); 
alert("The time is: " + today.toString()); 
setTimeout("showTime()", 5000); 
} 

調(diào)用函數(shù)后五秒鐘才會執(zhí)行一次showtime函數(shù)
setInterval的建立

復(fù)制代碼代碼如下:

 
setInterval("showTime()", 5000); 
function showTime() 
{ 
var today = new Date(); 
alert("The time is: " + today.toString()); 
} 

總結(jié)：貌似兩個(gè)函數(shù)的結(jié)果相似，其實(shí)不然第二個(gè)函數(shù)會反復(fù)的報(bào)時(shí)，直到該網(wǎng)頁被關(guān)閉。
兩個(gè)函數(shù)的消除：
setTimeout的消除使用
clearTimeout（）函數(shù)；調(diào)用的實(shí)例：

復(fù)制代碼代碼如下:

 
var timeoutProcess = setTimeout("alert('GOAL!')", 3000); 
var stopGoalLink = document.getElementById("stopGoalLink"); 
attachEventListener(stopGoalLink, "click", stopGoal, false);//加入事件函數(shù)，參數(shù)為（目標(biāo)；事件；調(diào)用的函數(shù)；是否冒泡） 
function stopGoal() 
{ 
clearTimeout(timeoutProcess); 
} 

setInterval的消除

復(fù)制代碼代碼如下:

 
var timeoutProcess = setTimeout("alert('GOAL!')", 3000); 
var stopGoalLink = document.getElementById("stopGoalLink"); 
attachEventListener(stopGoalLink, "click", stopGoal, false);//加入事件函數(shù)，參數(shù)為（目標(biāo)；事件；調(diào)用的函數(shù)；是否冒泡） 
function stopGoal() 
{ 
clearInterval(timeoutProcess); 
} 

您可能感興趣的文章:

相關(guān)文章

mescroll.js上拉加載下拉刷新組件使用詳解
這篇文章主要為大家詳細(xì)介紹了mescroll.js上拉加載下拉刷新組件的使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-11-11
JavaScript語法約定和程序調(diào)試原理解析
這篇文章主要介紹了JavaScript語法約定和程序調(diào)試原理解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-11-11
基于JavaScript實(shí)現(xiàn)鼠標(biāo)箭頭移動(dòng)圖片跟著移動(dòng)
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)鼠標(biāo)箭頭移動(dòng)圖片跟著移動(dòng)的核心代碼，代碼比較簡單易懂,需要的朋友可以參考下
2016-08-08
JavaScript中處理數(shù)據(jù)的常用方法
在前端項(xiàng)目中,常用的?JavaScript?處理數(shù)據(jù)的方法有很多,本文為大家整理了一些常用的方法,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-11-11
require.js的用法詳解
本文給大家介紹require.js的用法，require.js的誕生是為了解決兩大問題，第一實(shí)現(xiàn)js文件的異步加載，避免網(wǎng)頁失去響應(yīng)，第二管理模塊之間的依賴性，便于代碼的編寫和維護(hù)，對require.js用法感興趣的朋友可以參考下本篇文章
2015-10-10
JS值當(dāng)前DIV的ID值的代碼
JS值當(dāng)前DIV的ID值的代碼...
2007-05-05
新發(fā)現(xiàn)一個(gè)騙鏈接的方法(js讀取cookies)
新發(fā)現(xiàn)一個(gè)騙鏈接的方法(js讀取cookies)，需要的朋友可以參考下。
2012-01-01
使用wxapp-img-loader自定義組件實(shí)現(xiàn)微信小程序圖片預(yù)加載功能
由于微信小程序沒有提供類似 Image 這樣的 JS 對象，要實(shí)現(xiàn)圖片的預(yù)加載要麻煩一些，wxapp-img-loader自定義組件可以在微信小程序中實(shí)現(xiàn)圖片預(yù)加載功能,需要的朋友可以參考下
2018-10-10
JS實(shí)現(xiàn)向表格中動(dòng)態(tài)添加行的方法
這篇文章主要介紹了JS實(shí)現(xiàn)向表格中動(dòng)態(tài)添加行的方法,涉及javascript針對表格行的動(dòng)態(tài)添加技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-03-03
JS運(yùn)動(dòng)特效之同時(shí)運(yùn)動(dòng)實(shí)現(xiàn)方法分析
這篇文章主要介紹了JS運(yùn)動(dòng)特效之同時(shí)運(yùn)動(dòng)實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了javascript同時(shí)運(yùn)動(dòng)的原理與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2018-01-01