淺談JavaScript超時(shí)調(diào)用和間歇調(diào)用
間歇調(diào)用
在JavaScript中間歇調(diào)用很常見(jiàn),setInterval,就是間隔一定的時(shí)間重復(fù)調(diào)用。
setInterval()方法接收兩個(gè)參數(shù):第一個(gè)參數(shù)可以是字符串,也可以是函數(shù),第二個(gè)參數(shù)是一個(gè)以毫秒為單位的數(shù)字,表示重復(fù)間隔的時(shí)長(zhǎng)。
參數(shù)是字符串
當(dāng)?shù)谝粋€(gè)傳遞參數(shù)是字符串時(shí),如下:
setInterval("alert('this is a string.')",1000);
這里的字符串是一段JavaScript代碼,和傳入的eval()函數(shù)的參數(shù)一樣,如果是有內(nèi)外兩個(gè)引號(hào)的話,記得引號(hào)不要相同就行了。
setInterval()會(huì)返回一個(gè)數(shù)值型的ID,這個(gè)ID是計(jì)劃執(zhí)行代碼的唯一標(biāo)識(shí)符,所以可以用它來(lái)取消重復(fù)操作。setInterval()對(duì)應(yīng)的一個(gè)取消該操作的方法:clearInterval(),當(dāng)然要取消重復(fù)操作的話,clearInterval()必須放在還沒(méi)有執(zhí)行完畢的時(shí)候。
比如:
var intervalId=setInterval(...); clearInterval(intervalId);
首先我們獲取ID,然后將ID傳入clearInterval()中即可,因?yàn)槿∠僮骶o跟在setInterval()后面,所以可以立即取消,就和沒(méi)發(fā)生一樣。
參數(shù)是函數(shù)
因?yàn)楫?dāng)傳遞的參數(shù)是字符串的時(shí)候,可能會(huì)導(dǎo)致性能損失,所以一般情況下,用的最多的還是給它傳遞一個(gè)函數(shù)。
如下:
var num=0;
function increNum(){
num++;
if(num>=10){
clearInterval(intervalId);
alert('over');
}
}
intervalId=setInterval(increNum,500);
該段程序設(shè)置了一個(gè)increNum函數(shù),并作為參數(shù)傳遞給setInterval(),同時(shí)當(dāng)重復(fù)運(yùn)行到10次的時(shí)候,取消運(yùn)行操作,彈出警告框。
超時(shí)調(diào)用
超時(shí)調(diào)用和間歇調(diào)用類(lèi)似,setTimeout(),它也接收兩個(gè)參數(shù),第一個(gè)可以是包含JavaScript代碼的字符串,也可是一個(gè)函數(shù),第二個(gè)參數(shù)是延時(shí)時(shí)間和setInterval()方法的參數(shù)是一樣。
但是這里要說(shuō)明一點(diǎn):
延時(shí)時(shí)間并不是說(shuō)經(jīng)過(guò)設(shè)定的延時(shí)后程序一定會(huì)執(zhí)行。
為什么呢?
因?yàn)镴avaScript是單線程解釋器,所以在一定的時(shí)間內(nèi)只能執(zhí)行一段代碼,不能同時(shí)執(zhí)行多段代碼,所以在JavaScript中有一個(gè)任務(wù)隊(duì)列,將要執(zhí)行的任務(wù)按照先后順序排在隊(duì)列中,設(shè)定的延時(shí)時(shí)間是經(jīng)過(guò)這段時(shí)間將當(dāng)前任務(wù)加入到任務(wù)隊(duì)列中。如果當(dāng)前沒(méi)有任務(wù)執(zhí)行,那么加入到任務(wù)隊(duì)列中的代碼立刻執(zhí)行,如果當(dāng)前還有正在執(zhí)行的代碼段,那么只有當(dāng)該代碼段執(zhí)行完畢后再執(zhí)行新加入的任務(wù)。
同樣,setTimeout()也有一個(gè)返回ID,也可以通過(guò)這個(gè)數(shù)值ID來(lái)取消超時(shí)調(diào)用,對(duì)應(yīng)的取消方法是clearTimeout()。
在這里,我們用超時(shí)調(diào)用方法來(lái)把間歇調(diào)用中的那段重復(fù)執(zhí)行的代碼復(fù)寫(xiě)一遍:
var num=0;
function increNum(){
num++;
if(num<=10){
setTimeout(increNum,500);
}else{
alert('over');
}
}
setTimeout(increNum,500);
這段程序也可以完成重復(fù)操作并在10次之后終止操作,和上述的setInterval()有區(qū)別的是它并沒(méi)有用返回的數(shù)值ID。
因?yàn)閟etInterval()是重復(fù)執(zhí)行,所以一直會(huì)有數(shù)值ID返回,所以必須得一直跟蹤這個(gè)數(shù)值ID,而setTimeout()執(zhí)行完畢后就不再執(zhí)行,所以我們不用跟蹤這個(gè)返回的數(shù)值ID,這就給我們帶來(lái)了一定的便利。
而且,后一個(gè)間歇調(diào)用可能會(huì)在前一個(gè)間歇調(diào)用還沒(méi)結(jié)束之前被調(diào)用,當(dāng)函數(shù)的執(zhí)行時(shí)間比間歇調(diào)用的時(shí)間長(zhǎng)的時(shí)候這種情況就會(huì)發(fā)生,所以綜上所述,用setTimeout()來(lái)模擬間歇調(diào)用是一種比較好的途徑。
當(dāng)然,在比較簡(jiǎn)單的程序中用setInterval()還是沒(méi)有很大問(wèn)題的(突然想起了一句話,存在即是合理的~~~~)。
相關(guān)文章
JavaScript XML實(shí)現(xiàn)兩級(jí)級(jí)聯(lián)下拉列表
用xml作為存儲(chǔ)容器,不用數(shù)據(jù)庫(kù),速度和效率高些。2008-11-11
uni-file-picker文件選擇上傳功能實(shí)現(xiàn)
這篇文章主要介紹了uni-file-picker文件選擇上傳,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07
探討JavaScript語(yǔ)句的執(zhí)行過(guò)程
本文給大家介紹JavaScript語(yǔ)句的執(zhí)行過(guò)程的相關(guān)知識(shí),對(duì)js語(yǔ)句執(zhí)行過(guò)程的相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-01
20分鐘成功編寫(xiě)bootstrap響應(yīng)式頁(yè)面 就這么簡(jiǎn)單
這篇文章主要教大家如何在20分鐘內(nèi)成功編寫(xiě)bootstrap響應(yīng)式頁(yè)面,其實(shí)很簡(jiǎn)單,培養(yǎng)大家分分鐘開(kāi)發(fā)出一個(gè)高大上的頁(yè)面能力,感興趣的小伙伴們可以參考一下2016-05-05
mockjs,json-server一起搭建前端通用的數(shù)據(jù)模擬框架教程
下面小編就為大家分享一篇mockjs,json-server一起搭建前端通用的數(shù)據(jù)模擬框架教程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12

