亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

「JavaScript 定時(shí)器」setInterval、setTimeout和requestAnim

ghnor / 2358人閱讀

摘要：大多數(shù)瀏覽器并沒(méi)有精確到毫秒級(jí)別的觸發(fā)事件，例如，我們?cè)O(shè)定某個(gè)函數(shù)在毫秒后執(zhí)行，在老版本的中，這個(gè)函數(shù)至少會(huì)在毫秒以后執(zhí)行。三實(shí)戰(zhàn)光說(shuō)不練假把式，現(xiàn)在我們就用上面介紹的三種定時(shí)器完成進(jìn)度條的效果。

一.常見(jiàn)定時(shí)器 
我們常見(jiàn)的定時(shí)器有以下兩種

1. window.setTimeout 用于在指定的毫秒數(shù)后執(zhí)行某段既定的代碼
2. window.setInterval 用于每隔一段毫秒數(shù)重復(fù)執(zhí)行既定的代碼

這兩個(gè)方法都可以通過(guò)手工設(shè)置時(shí)間來(lái)設(shè)定是多少毫秒后執(zhí)行這段代碼，或者是每隔多少毫秒執(zhí)行這段代碼。

雖然我們期待瀏覽器按照我們?cè)O(shè)定的時(shí)間精確的執(zhí)行代碼，但是js卻不能保證代碼能恰好在那個(gè)時(shí)間點(diǎn)被運(yùn)行，原因有兩個(gè)。

大多數(shù)瀏覽器并沒(méi)有精確到毫秒級(jí)別的觸發(fā)事件，例如，我們?cè)O(shè)定某個(gè)函數(shù)在3毫秒后執(zhí)行，在老版本的IE中，這個(gè)函數(shù)至少會(huì)在15毫秒以后執(zhí)行。而在現(xiàn)代瀏覽器中，這個(gè)數(shù)值會(huì)短一點(diǎn)，但時(shí)間差一般也會(huì)超過(guò)1毫秒。

第二個(gè)原因與js的運(yùn)行機(jī)制有關(guān)，具體見(jiàn)JavaScript 運(yùn)行機(jī)制詳解：再談Event Loop.簡(jiǎn)單來(lái)說(shuō)，就是js是一個(gè)單線程的解釋器，一段時(shí)間只能執(zhí)行一段代碼，所以運(yùn)行時(shí)分為主線程和任務(wù)隊(duì)列兩部分。而我們?cè)诙〞r(shí)器中設(shè)置的時(shí)間，僅代表1000毫秒后把這個(gè)任務(wù)插入到任務(wù)隊(duì)列中，而此時(shí)必須要等到主線程的代碼執(zhí)行完畢，才能執(zhí)行任務(wù)隊(duì)列中的定時(shí)器的任務(wù)（在任務(wù)隊(duì)列中也有調(diào)度，不一定第一個(gè)執(zhí)行當(dāng)前任務(wù)），因此時(shí)間是無(wú)法保證的。

二、requestAnimationFrame

那有沒(méi)有時(shí)間準(zhǔn)確的定時(shí)器呢？有一種選擇是requestAnimationFrame. 示例如下：

 function animateMe(){
    requestAnimationFrame(function(){
      console.log(new Date());
      animateMe();
    })
}
animateMe();

這個(gè)api的原理是在由系統(tǒng)來(lái)決定回調(diào)函數(shù)的執(zhí)行時(shí)機(jī)，在每一次系統(tǒng)繪制之前，會(huì)主動(dòng)調(diào)用requestAnimationFrame中的回調(diào)函數(shù)，而頻率也緊緊跟隨瀏覽器的刷新頻率。比如一般電腦的刷新頻率通常為60Hz，即一秒鐘重繪60次，那么回調(diào)函數(shù)就等于1000/60=16.7毫秒被執(zhí)行一次，而如果刷新頻率變?yōu)?5Hz，那么這個(gè)時(shí)間就變?yōu)?000/75=13.3毫秒被執(zhí)行一次。這樣能保證回調(diào)函數(shù)在每一次繪制的間隔時(shí)間內(nèi)只被執(zhí)行一次，因此它的時(shí)間是可靠的。

三、實(shí)戰(zhàn)

光說(shuō)不練假把式，現(xiàn)在我們就用上面介紹的三種定時(shí)器完成進(jìn)度條的效果。

1.setInterval

var timer;
$(".runBtn").click(function(){
    clearInterval(timer);
    $("#bar").width(0);
    timer = setInterval(function(){
      if($("#bar").width() < 500){
         $("#bar").width($("#bar").width()+5);
         $("#bar").text($("#bar").width()/5+"%");
      }else{
        clearInterval(timer);
      } 
    },16);
 });

點(diǎn)此預(yù)覽效果

2.setTimeout

var timer;
$(".runBtn").click(function(){
    clearTimeout(timer);
    $("#bar").width(0);
    timer = setTimeout(function fn(){
      if($("#bar").width() < 500){
         $("#bar").width($("#bar").width()+5);
         $("#bar").text($("#bar").width()/5+"%");
         timer = setTimeout(fn,16);
      }else{
        clearTimeout(timer);
      } 
    },16);
 });

點(diǎn)此預(yù)覽效果

3.requestAnimationFrame

var timer;
$(".runBtn").click(function(){
    cancelAnimationFrame(timer);
    $("#bar").width(0);
    timer = requestAnimationFrame(function fn(){
      if($("#bar").width() < 500){
         $("#bar").width($("#bar").width()+5);
         $("#bar").text($("#bar").width()/5+"%");
         requestAnimationFrame(fn);
      }else{
        cancelAnimationFrame(timer);
      } 
    });
 });

點(diǎn)此預(yù)覽效果

四、最后

文章都來(lái)自本人的總結(jié)，難免有些紕漏，歡迎大家指正。一起學(xué)習(xí)，一起進(jìn)步。如果覺(jué)得不錯(cuò)，歡迎點(diǎn)贊收藏嚶嚶嚶~~~

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/107692.html

相關(guān)文章

  • JavaScript 定時(shí)器

    摘要：定時(shí)器方法相關(guān)方法有四種。返回值返回值是一個(gè)正整數(shù)，表示定時(shí)器的編號(hào)。這個(gè)值可以傳遞給來(lái)取消該定時(shí)器。使用方法很簡(jiǎn)單只有一個(gè)參數(shù)，該參數(shù)為您要取消定時(shí)器的標(biāo)識(shí)符。用法很簡(jiǎn)單當(dāng)代碼運(yùn)行到這行的時(shí)候，會(huì)取消所設(shè)置的定時(shí)器。 簡(jiǎn)單介紹在JavaScript中定時(shí)器有兩個(gè) setInterval() 與 setTime...

    王偉廷 評(píng)論0 收藏0

  • JS 異步的實(shí)現(xiàn)

    摘要：由于引擎同一時(shí)間只執(zhí)行一段代碼這是由單線程的性質(zhì)決定的，所以每個(gè)代碼塊阻塞了其它異步事件的進(jìn)行。這意味著瀏覽器將等待著一個(gè)新的異步事件發(fā)生。異步的任務(wù)執(zhí)行的順序是不固定的，主要看返回的速度。 我們經(jīng)常說(shuō)JS是單線程的，比如node.js研討會(huì)上大家都說(shuō)JS的特色之一是單線程的，這樣使JS更簡(jiǎn)單明了，可是大家真的理解所謂JS的單線程機(jī)制嗎？單線程時(shí)，基于事件的異步機(jī)制又該當(dāng)如何，這些知識(shí)...

    sihai 評(píng)論0 收藏0

  • 細(xì)說(shuō) Javascript 拾遺篇（四） : setTimeout 和 setInterval

    摘要：當(dāng)間隔時(shí)間設(shè)置較小時(shí)，將會(huì)導(dǎo)致回調(diào)函數(shù)堆積。處理可能阻塞的代碼最簡(jiǎn)單且最可控的方式就是在回調(diào)函數(shù)內(nèi)部使用函數(shù)。但是很明顯，由于指定最大值的限制，還會(huì)有定時(shí)器沒(méi)有被清除掉。另外，盡量避免使用函數(shù)，從而避免可能導(dǎo)致的回調(diào)函數(shù)堆積現(xiàn)象。 由于 Javascript 是異步的，因此我們可以通過(guò) setTimeout 和 setInterval 函數(shù)來(lái)指定特定時(shí)間執(zhí)行代碼。 function ...

    wangjuntytl 評(píng)論0 收藏0

  • javascript 定時(shí)器工作原理

    摘要：說(shuō)到中的定時(shí)器，我們肯定會(huì)想到和這兩個(gè)函數(shù)。第一個(gè)回調(diào)一執(zhí)行，又開(kāi)啟了第二個(gè)，這個(gè)定時(shí)器也是期望延時(shí)之后能夠執(zhí)行它的回調(diào)函數(shù)?？梢杂孟旅娴膱D來(lái)概括總結(jié)上面對(duì)定時(shí)器執(zhí)行原理進(jìn)行了簡(jiǎn)要的分析，希望能夠幫助我們更深入的理解。 說(shuō)到 javascript 中的定時(shí)器，我們肯定會(huì)想到 setTimeout() 和 setInterval() 這兩個(gè)函數(shù)。本文將從 事件循環(huán)（Event Loop）...

    godlong_X 評(píng)論0 收藏0

  • 從setTimeout-setInterval看JS線程

    摘要：提出標(biāo)準(zhǔn)，允許腳本創(chuàng)建多個(gè)線程，但是子線程完全受主線程控制，且不得操作。所以，這個(gè)新標(biāo)準(zhǔn)并沒(méi)有改變單線程的本質(zhì)。事件循環(huán)主線程線程只會(huì)做一件事，就是從消息隊(duì)列里面取消息執(zhí)行消息，再取消息再執(zhí)行。工作線程是生產(chǎn)者，主線程是消費(fèi)者。 最近項(xiàng)目中遇到了一個(gè)場(chǎng)景，其實(shí)很常見(jiàn)，就是定時(shí)獲取接口刷新數(shù)據(jù)。那么問(wèn)題來(lái)了，假設(shè)我設(shè)置的定時(shí)時(shí)間為1s，而數(shù)據(jù)接口返回大于1s，應(yīng)該用同步阻塞還是異步？我們...

    elliott_hu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<