Javascript中setTimeOut和setInterval的定時(shí)器用法
Javascript的setTimeOut和setInterval函數(shù)應(yīng)用非常廣泛,它們都用來(lái)處理延時(shí)和定時(shí)任務(wù),比如打開(kāi)網(wǎng)頁(yè)一段時(shí)間后彈出一個(gè)登錄框,頁(yè)面每隔一段時(shí)間發(fā)送異步請(qǐng)求獲取最新數(shù)據(jù)等等。但它們的應(yīng)用是有區(qū)別的。
setTimeout() 方法用于在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式,而setInterval()則是在每隔指定的毫秒數(shù)循環(huán)調(diào)用函數(shù)或表達(dá)式,直到clearInterval把它清除。也就是說(shuō)setTimeout()只執(zhí)行一次,setInterval()可以執(zhí)行多次。兩個(gè)函數(shù)的參數(shù)也相同,第一個(gè)參數(shù)是要執(zhí)行的code或句柄,第二個(gè)是延遲的毫秒數(shù)。
setTimeOut用法
setTimeout函數(shù)的用法如下:
var timeoutID = window.setTimeout(func, [delay, param1, param2, ...]);
var timeoutID = window.setTimeout(code, [delay]);
timeoutID:定時(shí)器ID號(hào),它可以在clearTimeout()函數(shù)中被用來(lái)清除定時(shí)器。
func:被執(zhí)行的函數(shù)。
code:(替代的語(yǔ)法)一個(gè)被執(zhí)行的代碼串。
delay:延遲的時(shí)間,單位毫秒。如果沒(méi)有指定,默認(rèn)為0。
我們可以使用window.setTimeout或setTimeout,兩個(gè)寫(xiě)法基本一樣,只不過(guò)window.setTimeout將setTimeout函數(shù)作為全局window對(duì)象的一個(gè)屬性來(lái)引用。
應(yīng)用示例:
function timeout(){
document.getElementById('res').innerHTML=Math.floor(Math.random()*100 + 1);
}
setTimeout("timeout()",5000);
代碼執(zhí)行時(shí),5秒后調(diào)用timeout()函數(shù),點(diǎn)擊看演示。
setInterval用法
setInterval函數(shù)的參數(shù)及用法和setTimeout函數(shù)一樣,請(qǐng)參照上文的setTimeout函數(shù)的用法介紹。不同的是,setInterval每隔一定的時(shí)間執(zhí)行當(dāng)中的func或code代碼。
應(yīng)用示例:
var tt = 10;
function timego(){
tt--;
document.getElementById("tt").innerHTML = tt;
if(tt==0){
window.location.href='/';
return false;
}
}
var timer = window.setInterval("timego()",1000);
函數(shù)timego()定義了頁(yè)面元素#tt顯示的內(nèi)容,當(dāng)tt等于0時(shí),頁(yè)面定向到首頁(yè)。然后我們定義一個(gè)定時(shí)器timer,使用setInterval()每隔1秒調(diào)用一次timego()。這樣timego會(huì)執(zhí)行10次,每次數(shù)字tt會(huì)減1,直到為0。那么如果想停止定時(shí)器,可以使用以下代碼:
window.clearInterval(timer);
代碼執(zhí)行時(shí),10秒后頁(yè)面跳轉(zhuǎn)到首頁(yè)
其實(shí)setTimeout()也可以實(shí)現(xiàn)每隔一段時(shí)間重復(fù)執(zhí)行某個(gè)函數(shù),但我們還是簡(jiǎn)單的區(qū)別使用setTimeOut和setInterval。另外javascript都是以單線程的方式運(yùn)行于瀏覽器的javascript引擎中,實(shí)際應(yīng)用中復(fù)雜的任務(wù)中需要排隊(duì)執(zhí)行,這就可能導(dǎo)致定時(shí)器時(shí)間不準(zhǔn),這個(gè)問(wèn)題在大型應(yīng)用中需要考慮,本文不做深究。
以上所述就是本文的全部?jī)?nèi)容了,希望大家能夠喜歡。
- javascript中SetInterval與setTimeout的定時(shí)器用法
- JavaScript定時(shí)器setTimeout()和setInterval()詳解
- 定時(shí)器(setTimeout/setInterval)調(diào)用帶參函數(shù)失效解決方法
- 詳解JS中定時(shí)器setInterval和setTImeout的this指向問(wèn)題
- 理解javascript定時(shí)器中的setTimeout與setInterval
- JavaScript中定時(shí)器setTimeout()和setInterval()的用法
- JavaScript定時(shí)器setTimeout、setInterval使用詳解
相關(guān)文章
JavaScript實(shí)現(xiàn)字符串與HTML格式相互轉(zhuǎn)換
這篇文章主要介紹了JavaScript實(shí)現(xiàn)字符串與HTML格式相互轉(zhuǎn)換,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-03-03詳解JavaScript基于面向?qū)ο笾畡?chuàng)建對(duì)象(2)
這篇文章主要介紹了JavaScript基于面向?qū)ο笾畡?chuàng)建對(duì)象,詳細(xì)的分析面向?qū)ο蟮脑头绞揭约捌渌C合的方式,感興趣的小伙伴們可以參考一下2015-12-12微信小程序如何保證每個(gè)頁(yè)面都已經(jīng)登陸詳解
前段時(shí)間發(fā)布了一個(gè)微信小程序的簡(jiǎn)單登錄,但遇到一個(gè)問(wèn)題,怎么確保用戶每個(gè)頁(yè)面都已經(jīng)登陸了呢,這篇文章主要給大家介紹了關(guān)于微信小程序如何保證每個(gè)頁(yè)面都已經(jīng)登陸的相關(guān)資料,需要的朋友可以參考下2021-11-11解讀JavaScript代碼 var ie = !-[1,] 最短的IE判定代碼
這句代碼在IE9之前曾被稱(chēng)為世界上最短的IE判定代碼。代碼雖短但確包含了不少javascript基礎(chǔ)知識(shí)在里面。2011-05-05JavaScript中防抖和節(jié)流的原理和區(qū)別詳解
JavaScript 中,防抖和節(jié)流是一種用于優(yōu)化事件處理函數(shù)調(diào)用頻率的技術(shù),防抖和節(jié)流的目的都是為了避免頻繁地觸發(fā)事件處理函數(shù),從而減少瀏覽器和服務(wù)器的負(fù)擔(dān),本文將給大家介紹一下JavaScript中防抖和節(jié)流的原理和區(qū)別,需要的朋友可以參考下2023-09-09微信小程序?qū)崿F(xiàn)幸運(yùn)大轉(zhuǎn)盤(pán)功能的示例代碼
這篇文章主要介紹了如何在微信小程序中實(shí)現(xiàn)幸運(yùn)大轉(zhuǎn)盤(pán)功能,參與用戶點(diǎn)擊抽獎(jiǎng)便可抽取輪盤(pán)的獎(jiǎng)品,感興趣的小伙伴可以跟隨小編一起動(dòng)手試一試2022-03-03Web純前端“旭日?qǐng)D”實(shí)現(xiàn)元素周期表
本文主要介紹了Web純前端“旭日?qǐng)D”實(shí)現(xiàn)元素周期表的實(shí)例解析。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03