高級定時器---《高程3》

miya 發布于2019-08-20 11:30 / 2925人閱讀

摘要：也就是說，代碼隊列中僅能有一個間歇定時器在等待。這導致兩個問題，一是某些間隔會跳過，二是多個定時器的代碼之間的間隔可能比預期的小。

定時器：間歇調用和超時調用

超時調用：setTimeout()，接受兩個參數，第一個參數是可執行的JavaScript代碼字符串，或是回調函數，第二個參數是毫秒為單位的插入代碼隊列的的時間。
清除方式：clearTimeout()，參數是設置setTimeout時返回的數值ID。

var timeId = setTimeout(function(){
    alert("hello world");    
}, 5000);
clearTimeout(timeId);

間歇調用：setInterval()，接受的兩個參數和setTimeout()類似，只是時間參數代表兩次間隔插入代碼隊列的的時間。
清除方式：clearInterval()，參數是設置間歇調用時返回的數值ID。清除間歇調用很重要，因為不清除就會一直執行，也就是一直在JavaScript的時間線中。因為JavaScript是單線程執行的，也就是說如果不清除間歇調用，代碼隊列中的其他的代碼即使進入了代碼也是無法執行的。事實上，間歇調用導致的問題不止如此。

    var timeId = setInterval(function(){
        alert("hello world");    
    }, 5000);
    clearInterval(timeId);

一般沒有必要跟蹤超時調用的ID，因為執行一次之后就自動清除了；但是間歇調用最好人工清除，或者采用超時調用模擬間歇調用，這還有另外一個好處。

JavaScript的時間線及間歇調用的困擾

JavaScript是單線程執行的，不同時期由不同的代碼控制JavaScript時間線，由瀏覽器從代碼隊列中選擇特定的代碼執行。定時器中設置的時間實際上是指定時器代碼進入代碼隊列的時間，實際開始運行時間取決于JavaScript進程是否空閑，如果不空閑就要等待正在執行的代碼完成執行。

var btn = document.getElementById(“my-btn”);
btn.onclick = function(){
setTimeout(function(){
        document.getElementById(“message”).style.visibility = “visible”;
    }, 250);
};

上圖設置了一個250ms后的timer，但是由于onclick事件處理程序要執行300ms，即使到了255ms，timer也是不執行的，直到onclick執行完才能執行。

JavaScript的這種單線程執行方式導致了瀏覽器添加間歇定時器代碼時，僅能等待隊列中沒有該定時器的代碼實例時才能加進去，否則加不進去。也就是說，代碼隊列中僅能有一個間歇定時器在等待。這導致兩個問題，一是某些間隔會跳過，二是多個定時器的代碼之間的間隔可能比預期的小。

上圖表明，205ms加入的定時器在300ms開始執行，由于定時器執行時間超過一個時間間隔（200ms），在405ms第二個定時器進入隊列，但是605ms時的代碼卻難以進入隊列了，這是因為405ms進入的代碼還在隊列中。
為了避免重復定時器的缺點，常使用超時定時器模擬間歇定時器，如下：

setTimeout(function(){
//processing
setTimeout(arguments.callee, interval);
}, interval);
具體的使用實例如下：

  
  
  
  
    the onlt one div

定時器的使用：數組分塊（array chunking）和函數節流（function throttling）

數組分塊的原因：JavaScript的功能是被限制的，無法像桌面應用一樣無限制的占有資源。其中一個限制就是執行時間的限制，如果代碼執行超過特定的時間或者特定的語句數目就禁止繼續執行。因此，在處理大規模數組時，可以使用定時器將數組分為多個塊間斷執行，JavaScript進程有時間在處理數組項目的事件之間轉入空閑，這樣整個數組項目項目的處理就不會受執行時間限制。實現數組分組的函數如下：

    the onlt one div

函數節流的原因：瀏覽器中某些計算很耗費資源，包括CPU和內存，例如resize操作，因此如果循環執行這些操作會使瀏覽器崩潰。函數節流的原理類似于數組分塊，也就是某一個執行代碼用定時器分位數塊執行。不詳細介紹。

云服務器 GPU云服務器數字高程高程注記修改高程 python高程數據

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80610.html

高級定時器---《高程3》

摘要：也就是說，代碼隊列中僅能有一個間歇定時器在等待。這導致兩個問題，一是某些間隔會跳過，二是多個定時器的代碼之間的間隔可能比預期的小。定時器：間歇調用和超時調用超時調用：setTimeout()，接受兩個參數，第一個參數是可執行的JavaScript代碼字符串，或是回調函數，第二個參數是毫秒為單位的插入代碼隊列的的時間。清除方式：clearTimeout()，參數是設置setTimeo...

hikui 2019-08-01 15:49 評論0 收藏0
高程3總結#第22章高級技巧

摘要：如果構造函數竊取結合使用原型鏈或者寄生組合則可以解決這個問題惰性載入函數惰性載入表示函數執行的分支僅會發生一次。當第二次調用該函數時，它會清除前一次的定時器并設置另一個。，用于注銷某個事件類型的事件處理程序。高級技巧高級函數安全的類型檢測 typeof操作符在檢測數據類型時，可能會得到不靠譜的結果 instanceof操作符在存在多個全局作用域，也就是頁面包含多個iframe的...

CKJOKER 2019-08-23 12:15 評論0 收藏0
JS高程中的垃圾回收機制與常見內存泄露的解決方法

摘要：解決方式是，當我們不使用它們的時候，手動切斷鏈接淘汰把和對象轉為了真正的對象，避免了使用這種垃圾收集策略，消除了以下常見的內存泄漏的主要原因。以上參考資料高程垃圾收集類內存泄漏及如何避免內存泄露及解決方案詳解類內存泄漏及如何避免 showImg(http://ww1.sinaimg.cn/large/005Y4rCogy1ft1ikzcqzqj30ka0et77a.jpg); 前言起...

kidsamong 2019-08-22 18:35 評論0 收藏0
三張圖理解JS高級定時器

摘要：圖二解讀定時器可以在指定時間把定時器代碼加入待執行隊列，但并不能保證代碼執行時機，待執行隊列中的代碼要等進程空閑時才能執行。也就是說定時器每隔間隔觸發一次，嘗試加入隊列，擁堵時段將直接忽略本次操作。圖片出自JS高程（第三版） showImg(https://segmentfault.com/img/bVbgC3V?w=1337&h=313); 圖一解讀：JS運行于單線程的環境中：頁面...

LiveVideoStack 2019-08-23 11:51 評論0 收藏0
高級函數技巧-函數防抖與節流

摘要：封裝方法也比較簡單，書中對此問題也進行了處理使用定時器，讓函數延遲秒后執行，在此秒內，然后函數再次被調用，則刪除上次的定時器，取消上次調用的隊列任務，重新設置定時器。在實際開發中，函數一定是最實用最頻繁的一部分，無論是以函數為核心的函數式編程，還是更多人選擇的面向對象式的編程，都會有函數的身影，所以對函數進行深入的研究是非常有必要的。函數節流比較直白的說，函數節流就是強制規定一...

whinc 2019-08-22 11:21 評論0 收藏0