欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

setTimeout函數(shù)的神奇使用

 更新時間:2017年02月26日 15:50:00   作者:Javdroider  
setTimeout函數(shù)是一個原生的javascript函數(shù)。setTimeout函數(shù)會在一個指定的延遲時間之后調(diào)用一個函數(shù)或執(zhí)行一段指定的代碼。它的應(yīng)用非常廣泛,例如我們希望用戶在瀏覽器某個頁面一段時間后彈出一個對話框,或者是鼠標(biāo)點擊某個元素后隔幾秒鐘在刪除這個元素。

【寫在前面的胡言亂語】

  自從大三開始實習(xí)之后,就沒有寫博客了,雖然學(xué)了很多東西,但是如果沒有進行總結(jié)和分享,學(xué)的東西就很容易忘記,而且不進行分享,就不會手動去敲代碼,這樣對知識的理解就不夠透徹。

現(xiàn)在畢業(yè)半年多了,最近學(xué)習(xí)了《JavaScript高級程序設(shè)計》這本書,受益匪淺,看了才知道雖然自己寫了那么多JS,但是對JS的理解最多就只是中下水平。

現(xiàn)在看第二遍,邊看邊敲代碼,邊分享,希望看到這篇文章的你,能有所收獲。

【這是正文】

  《JavaScript高級程序設(shè)計》這本書里面,介紹了很多關(guān)于setTimeout函數(shù)的神奇使用,今天來介紹下第一個——使用setTimeout代替setInterval進行間歇調(diào)用。

  書中是這么說的

“在開發(fā)環(huán)境下,很少使用間歇調(diào)用(setInterval),原因是后一個間歇調(diào)用很可能在前一個間歇調(diào)用結(jié)束前啟動”。

  這話怎么理解呢?

  首先我們來看一下一般情況下的setInterval函數(shù)的使用,以及如何使用setTimeout代替setInterval

var executeTimes = 0;

var intervalTime = 500;

var intervalId = null;

 

// 放開下面的注釋運行setInterval的Demo

intervalId = setInterval(intervalFun,intervalTime);

// 放開下面的注釋運行setTimeout的Demo

// setTimeout(timeOutFun,intervalTime);

 

function intervalFun(){

executeTimes++;

console.log("doIntervalFun——"+executeTimes);

if(executeTimes==5){

clearInterval(intervalId);

}

}

 

function timeOutFun(){

executeTimes++;

console.log("doTimeOutFun——"+executeTimes);

if(executeTimes<5){

setTimeout(arguments.callee,intervalTime);

}

}

  代碼比較簡單,我們只是在setTimeout的方法里面又調(diào)用了一次setTimeout,就可以達到間歇調(diào)用的目的。

  重點來了,為什么作者建議我們使用setTimeout代替setInterval呢?setTimeout式的間歇調(diào)用和傳統(tǒng)的setInterval間歇調(diào)用有什么區(qū)別呢?

  區(qū)別在于,setInterval間歇調(diào)用,是在前一個方法執(zhí)行前,就開始計時,比如間歇時間是500ms,那么不管那時候前一個方法是否已經(jīng)執(zhí)行完畢,都會把后一個方法放入執(zhí)行的序列中。這時候就會發(fā)生一個問題,假如前一個方法的執(zhí)行時間超過500ms,加入是1000ms,那么就意味著,前一個方法執(zhí)行結(jié)束后,后一個方法馬上就會執(zhí)行,因為此時間歇時間已經(jīng)超過500ms了。

  書中沒有給出代碼證明這個結(jié)論,于是自己寫了一段代碼來驗證。

var executeTimes = 0;

var intervalTime = 500;

var intervalId = null;

var oriTime = new Date().getTime();

 

// 放開下面的注釋運行setInterval的Demo

intervalId = setInterval(intervalFun,intervalTime);

// 放開下面的注釋運行setTimeout的Demo

// setTimeout(timeOutFun,intervalTime);

 

function intervalFun(){

executeTimes++;

var nowExecuteTimes = executeTimes;

var timeDiff = new Date().getTime() - oriTime;

console.log("doIntervalFun——"+nowExecuteTimes+", after " + timeDiff + "ms");

var delayParam = 0;

sleep(1000);

console.log("doIntervalFun——"+nowExecuteTimes+" finish !");

if(executeTimes==5){

clearInterval(intervalId);

}

}

 

function timeOutFun(){

executeTimes++;

var nowExecuteTimes = executeTimes;

var timeDiff = new Date().getTime() - oriTime;

console.log("doTimeOutFun——"+nowExecuteTimes+", after " + timeDiff + "ms");

var delayParam = 0;

sleep(1000);

console.log("doTimeOutFun——"+nowExecuteTimes+" finish !");

if(executeTimes<5){

setTimeout(arguments.callee,intervalTime);

}

}

 

function sleep(sleepTime){

var start=new Date().getTime();

while(true){

  if(new Date().getTime()-start>sleepTime){

  break;

}

}

}

 ?。ㄟ@里使用大牛提供的sleep函數(shù)來模擬函數(shù)運行的時間)

  執(zhí)行setInterval的Demo方法,看控制臺

  可以發(fā)現(xiàn),fun2和fun1開始的間歇接近1000ms,剛好就是fun1的執(zhí)行時間,也就意味著fun1執(zhí)行完后fun2馬上就執(zhí)行了,和我們間歇調(diào)用的初衷背道而馳。

  我們注釋掉setInterval的Demo方法,放開setTimeout的Demo方法,運行,查看控制臺

  這下終于正常了,fun1和fun2相差了1500ms = 1000 + 500,fun2在fun1執(zhí)行完的500ms后執(zhí)行。

  不知道你有沒有和我一樣腦洞大開,反正我是感覺視野又開闊了一點,setTimeout的妙用還有很多,下次接著聊!

相關(guān)文章

  • JS運動改變單物體透明度的方法分析

    JS運動改變單物體透明度的方法分析

    這篇文章主要介紹了JS運動改變單物體透明度的方法,結(jié)合實例形式分析了頁面元素屬性動態(tài)修改相關(guān)操作技巧,需要的朋友可以參考下
    2018-01-01
  • javascript數(shù)組元素刪除方法delete和splice解析

    javascript數(shù)組元素刪除方法delete和splice解析

    這篇文章主要介紹了javascaipt數(shù)組元素刪除方法delete和splice解析,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2019-12-12
  • 微信開發(fā) 消息推送實現(xiàn)代碼

    微信開發(fā) 消息推送實現(xiàn)代碼

    這篇文章主要介紹了微信開發(fā) 消息推送實現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下
    2016-10-10
  • 使用js在頁面中繪制表格核心代碼

    使用js在頁面中繪制表格核心代碼

    在頁面中繪制表格可以滿足我們對數(shù)據(jù)的輸入需求,在js中可以很容易實現(xiàn),下面有個不錯的示例,感興趣的朋友可以參考下
    2013-09-09
  • 用JavaScript實現(xiàn)動畫效果的方法

    用JavaScript實現(xiàn)動畫效果的方法

    大家在使用Dreamweaver中的時間線功能或以做出很有趣的動畫效果,Dreamweaver會自動為用戶生成特定的程序代碼,大家有沒有想過動畫的實現(xiàn)原理呢?
    2013-07-07
  • js微信分享API

    js微信分享API

    這篇文章主要為大家詳細介紹了js微信分享實現(xiàn)代碼,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-07-07
  • JavaScript?WeakMap的具體使用

    JavaScript?WeakMap的具體使用

    本文主要介紹了JavaScript?WeakMap的具體使用,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-02-02
  • layui自定義工具欄的方法

    layui自定義工具欄的方法

    今天小編就為大家分享一篇layui自定義工具欄的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • js實現(xiàn)表格單列按字母排序

    js實現(xiàn)表格單列按字母排序

    這篇文章主要為大家詳細介紹了js實現(xiàn)表格單列按字母排序,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-08-08
  • javascript DOM編程實例(智播客學(xué)習(xí))

    javascript DOM編程實例(智播客學(xué)習(xí))

    最近一直在努力學(xué)習(xí)DOM編程這塊,這是目前成就感最強烈的一塊了,畢老師很認真的給我們講解了相關(guān)知識,并在網(wǎng)上找了很多做的非常棒的網(wǎng)頁作為例程給我們進行講解
    2009-11-11

最新評論