于吉吉的技術博客

          建造高性能門戶網

            BlogJava :: 首頁 :: 新隨筆 :: 聯系 :: 聚合  :: 管理 ::
            65 隨筆 :: 6 文章 :: 149 評論 :: 0 Trackbacks

          前段時間做了一個團購秒殺倒計時的js展現的例子(http://www.aygfsteel.com/dongbule/archive/2011/12/06/365687.html),倒計時的方式主要使用setTimeout的函數進行遞歸實現,由于是使用setTimeout,所以根據js的引擎,這其中將可能存在一定的時間誤差,一個誤差不要緊,兩個誤差無所謂,但長時間的誤差堆積將出現較大的偏離值,所以根據秒殺倒計時的例子,做了一個簡單的模擬的誤差堆積測試,并在各個瀏覽器中進行測試。
          鑒于秒殺倒計時都是以一秒為單位,所以下面的例子也都以1000毫秒為計算,當然各個瀏覽器的實現和附加代碼的編寫也會造成一定的時間誤差,這部分誤差也合并在setTimeout的實現里面計算誤差。

          <div id="show" style="width:500px;"></div>
          <script>
          var w = 1000;
          var second = 0;
          function showtime(){    
          showtime.curr
          =  +new Date();    
          setTimeout('showtime()',
          1000);    
          document.getElementById(
          "show").innerHTML+=second +"    "+(showtime.curr-(showtime.last||showtime.curr)-1000)+"    <br/>";    
          showtime.last
          =showtime.curr;    
          second
          ++;
          }
          showtime();
          </script>

          可以看到在各個不同的瀏覽器在不同的秒數中出現不同的誤差,當然這個跟我本機的瀏覽器和環境有關



          下面再將這些誤差值進行疊加測試

          <div>
          <div id="show" style="width:500px;"></div>
          </div>
          <script>
          var w = 1000;
          var i = 0;
          function showtime(){
              showtime.curr
          =  +new Date();
              f 
          = setTimeout('showtime()',1000);
              w
          +=(showtime.curr-(showtime.last||showtime.curr)-1000);
              document.getElementById(
          "show").innerHTML+=i+"   "+(showtime.curr-(showtime.last||showtime.curr)-1000)  +"    "+w+" 

          <br/>
          ";
              showtime.last
          =showtime.curr;
              i
          ++;
          }
          showtime();
          </script>



          IE和chrome相對較為穩定,不知道是不是我本機環境的原因,firefox出現了很多大偏差,可以選擇定時清空這個誤差值來處理,或是采用鏈式的setTimeOut()來處理。

          <div id="show" style="width:300px;"></div>
          <script>
          var w = 1000;
          var i = 0;
          var f ;
          var t ;
          var k = 0;
          function showtime(){
              showtime.curr
          =  +new Date();
              f 
          = setTimeout('showtime()',1000);
              w
          +=(showtime.curr-(showtime.last||showtime.curr)-1000);
              document.getElementById(
          "show").innerHTML+=i+"   "+w+"  "+(showtime.curr-(showtime.last||showtime.curr)-1000)  +"    <br/>";
              showtime.last
          =showtime.curr;
              i
          ++;
          }
          function round(){
              
          if(k!=0){
                  clearTimeout(f);
                  showtime();
                  document.getElementById(
          "show").innerHTML+="  clear<br/>";
                  w
          =0;
              }
              setTimeout('round()',
          10000);
              k
          ++;
          }
          showtime();
          round();
          </script>

          其實為什么javascript的定時器會出現所謂的不可靠或偏差的情況,這是可以理解的,最主要的問題是它們并不是所謂的線程,其實
          javascript是運行于單線程的環境中,而定時器只是計劃代碼在未來某個執行的時間,執行的時間點是不能被保證的,因為在頁面的生命周期中,不同時間可能存在其他代碼,或各個瀏覽器的內核控制住javascript進程。

          settimeout幾個見解
          1、setTimeOut  !=  thread | 時間片的并發調用
          2、javascript以單線程的方式運行于瀏覽器的javascript引擎中
          3、setTimeout 只是把要執行的代碼在設定的時間點插入js引擎維護的代碼隊列
          4、setTimeout 插入代碼隊列并不意味著代碼就會立馬執行的

          function showtime(){
          // code 1...
          f = setTimeout('showtime()',200);     //200毫秒后要插入執行代碼對瀏覽器的js隊列
          // code 2...
          }
          以上面面的代碼為例,說說它的執行流程
          Code 1 -> 200毫秒后通知瀏覽器有隊列插入   ->   Code 2   ->   showtime()  ->    …
          這個種重復遞歸可能會造成2個問題:
          1 . 時間間隔可能小于定時調用的代碼的執行時間
          2 . 時間間隔或許會跳過

          時間間隔或許會跳過


          5ms : code1 代碼執行完畢,200ms后有定時器進入隊列
          205ms : 定時器進入隊列,code2繼續
          300ms : function代碼結束,定時器從隊列中取出,執行
          405ms : 第二個定時器進入隊列,第一個定時器的代碼在執行中
          605ms : 第三個定時器意圖進入隊列失敗,這個點的settimeout丟失

          為了避免這2個問題,可以采用鏈式setTimeOut()進行調用
          setTimeOut(function(){
          code處理...
          setTimeOut(arguments.callee,interval);
          },interval);
          這個模式鏈式條用setTimeOut(),每次函數執行的時候都會創建一個新的定時器,第二個setTimeOut調用使用了arguments.callee來獲取當前執行的函數引用,并為其設置另外一個定時器,這樣的好處在于,在前一個定時器執行完之前不會向隊列中插入新的定時器代碼,確保不會有任何的確實間隔,而且它可以保證在下一次定時器代碼執行前,至少等待指定的間隔,避免連續的運行。



          //-------------//
          秒殺的定時器已經通過檢測正式運行了,博客記錄得不好,表達不是很清楚,關于setTimeOut的函數主要參考了《JavaScript高級程序設計(第2版)》的第18章。
          posted on 2012-01-10 15:15 陳于喆 閱讀(3548) 評論(6)  編輯  收藏 所屬分類: web開發

          評論

          # re: 對setTimeout的誤差堆積測試和簡單分析 2012-01-10 23:00 rox
          這個夠專業,學習一下!  回復  更多評論
            

          # re: 對setTimeout的誤差堆積測試和簡單分析 2012-01-11 09:06 tb
          很專業啊   回復  更多評論
            

          # re: 對setTimeout的誤差堆積測試和簡單分析 2012-01-11 09:20 HiMagic!
          這個在我的博客也提到過,當頁面內容較多時偏差更嚴重。如果只靠setTimeout的interval倒計時,而不看本地Date當前值,相差更嚴重。  回復  更多評論
            

          # re: 對setTimeout的誤差堆積測試和簡單分析 2012-01-12 15:17 第一時尚網
          學習了。。。謝謝博主  回復  更多評論
            

          # re: 對setTimeout的誤差堆積測試和簡單分析 2013-09-27 20:47 購物導航
          購物導航http://www.5a77.com/
          不好意思呵,來推廣一下自己的網站
          也支持一下你的文章,寫得這么好,剛好路過呵  回復  更多評論
            

          # re: 對setTimeout的誤差堆積測試和簡單分析 2015-08-11 14:36 hirain
          代碼中: showtime.curr= +new Date();是什么意思,為什么要寫個加號?  回復  更多評論
            

          主站蜘蛛池模板: 共和县| 霍山县| 桂平市| 神农架林区| 仙桃市| 拉孜县| 德令哈市| 西峡县| 柳江县| 儋州市| 乐东| 大英县| 田阳县| 星子县| 乌兰察布市| 即墨市| 金山区| 阿合奇县| 永兴县| 抚顺市| 湖南省| 保亭| 黑龙江省| 威宁| 颍上县| 苗栗县| 分宜县| 贵州省| 镇坪县| 贡山| 土默特右旗| 治县。| 云阳县| 高陵县| 普兰县| 荥经县| 稻城县| 屏山县| 岳普湖县| 聂拉木县| 葵青区|