JavaScript setTimeout和setInterval的使用方法說明

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

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

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

復制代碼代碼如下:

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

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

復制代碼代碼如下:

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

總結：貌似兩個函數的結果相似，其實不然第二個函數會反復的報時，直到該網頁被關閉。
兩個函數的消除：
setTimeout的消除使用
clearTimeout（）函數；調用的實例：

復制代碼代碼如下:

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

setInterval的消除

復制代碼代碼如下:

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

您可能感興趣的文章:

JSON生成Form表單的方法示例
JSON表單是一個基于React的抽象組件，它可以把JSON數據格式描述的表單轉換成項目中的表單，這篇文章主要介紹了JSON生成Form表單的方法示例,感興趣的小伙伴們可以參考一下
2018-11-11
IE瀏覽器IFrame對象內存不釋放問題解決方法
IFrame對象占用的內存資源在窗體關閉后不會釋放。彈出關閉反復多次后，IE瀏覽器內存占用可超過數百M，嚴重時IE瀏覽器報錯
2014-08-08
javascript:void(0)用法及常見問題分析
javascript:void(0) 在某些情況下會有瀏覽器不兼容的bug。下面我們先來看下javascript:void(0) 的基礎介紹及用法，然后再來看使用它會出現什么問題，該怎么解決，感興趣的朋友跟隨小編一起看看吧
2023-10-10
JavaScript的面向對象(二)
JavaScript的面向對象(二)...
2006-11-11
typescript中type和interface的區(qū)別有哪些
大家使用typescript總會使用到interface和type,所以下面這篇文章主要給大家介紹了關于typescript中type和interface區(qū)別的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-02-02
JS實現黑色大氣的二級導航菜單效果
這篇文章主要介紹了JS實現黑色大氣的二級導航菜單效果,具有延遲響應鼠標事件顯示切換效果的功能,非常簡單實用,需要的朋友可以參考下
2015-09-09
微信小程序判斷頁面是否從其他頁面返回的實例代碼
這篇文章主要介紹了微信小程序判斷頁面是否從其他頁面返回的實例代碼，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下
2019-07-07
使用Nest.js實現接口教程示例
這篇文章主要為大家介紹了使用Nest.js實現接口教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-10-10
JavaScript之map reduce_動力節(jié)點Java學院整理
這篇文章主要為大家詳細介紹了JavaScript之map reduce的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
JS實現根據URL批量下載文件并壓縮成zip文件
這篇文章主要為大家學習介紹了JS如何實現根據URL批量下載文件并壓縮成zip文件，文中的示例代碼講解詳細，感興趣的小伙伴可以了解一下
2023-08-08