JavaScript 高級技巧——“高級定時器”的注意要點

rubyshen 發布于2019-08-19 17:44 / 1286人閱讀

摘要：為了規避這個問題，可以使用定時器對事件處理程序進行節流。當第二次調用該函數時，它會清除前一次的定時器，并設置另一個。如果前一個定時器已經執行過了，這個操作就沒有任何意義。然而如果前一個定時器尚未執行，其實就是將其替換為一個新的定時器。

高級定時器

為了解決setInterval的一些執行問題，下面是采用鏈式setTimeout的方式來規避：

setTimeout(function() {
    // add code here
    setTimeout(arguments.callee, interval);
}, interval);

避免使用arguments.callee：

setTimeout(function func () {
    // body...
    setTimeout(func, interval);
}, interval);

Yielding Processes

腳本長時間運行的原因：過長的、過深嵌套的函數調用；進行大量的處理循環。
在展開循環之前，你需要考慮兩個重要的問題：

該出事是否必須同步完成？

數據是否必須按順序完成？

當你發現有些循環占用大量的事件，同時對上述兩個問題答案都是否，那么可以使用定時器來分隔這個循環。

setTimeout(function() {
    //取出下一個條目處理
    var item = array.shift();
    process(item);
    //還有條目，再設置一個定時器
    if (array.length > 0) {
        setTimeout(arguments.callee, interval);
    }
}, interval);

如：

var div = document.getElementById("div");
var arr = [321, 32, 1432, 432, 432, 321, 5435, 6454, 6576, 56434, 2321, 321, 31, 32, 1432, 432, 432, 321, 5435, 6454, 6576, 56434, 2321, 321, 31, 32, 1432, 432, 432, 321, 5435, 6454, 6576, 56434, 2321, 321, 31, 32, 1432, 432, 432, 321, 5435, 6454, 6576, 56434, 2321, 321, 31, 32, 1432, 432, 432, 321, 5435, 6454, 6576, 56434, 2321, 321, 31, 32, 1432, 432, 432, 321, 5435, 6454, 6576, 56434, 2321, 321, 31, 32, 1432, 432, 432, 321, 5435, 6454, 6576, 56434, 2321, 321, 31, 32, 1432, 432, 432, 321, 5435, 6454, 6576, 56434, 2321, 321, 31];

for (var i = 0, len = arr.length; i < len; i++) {
    div.innerHTML += arr[i] + "
";
};
//16ms 用時

setTimeout(function shiftArr() {
    var item = arr.shift();
    div.innerHTML += item + "
";
    if (arr.length > 0) {
        setTimeout(shiftArr, 0);
    }
}, 0)
//58.2ms 用時

函數節流

對一些持續不斷觸發的事件，如果建立的事件處理程序不夠好的話，會導致瀏覽器崩潰或者其他的事故。為了規避這個問題，可以使用定時器對事件處理程序進行節流。

函數節流背后的基本思想是：一些代碼不可以在沒有間斷的情況下連續重復執行。具體做法是：第一次調用函數，創建一個定時器，在指定的時間間隔后運行代碼。當第二次調用該函數時，它會清除前一次的定時器，并設置另一個。如果前一個定時器已經執行過了，這個操作就沒有任何意義。然而如果前一個定時器尚未執行，其實就是將其替換為一個新的定時器。目的就是執行函數的請求停止了一段時間之后才執行。以下是該模式的基本形式：

var processor = {
    timeoutId: null,

    performProcessing: function() {
        //實際執行的處理程序
    },
    process: function() {
        clearTimeout(this.timeoutId);
        var that = this;
        this.timeoutId = setTimeout(function() {
            that.performProcessing();

        }, 1000);
    }
};
processor.process(); //嘗試開始執行

只要代碼是周期性執行的，都應該用節流。處理的速率根據需求設置，上面的例子是1000毫秒。

GPU云服務器云服務器高級顯示技巧 JAVASCRIPT技巧 javascript七大技巧 javascript調試技巧

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

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

JavaScript 高級技巧

摘要：如果直接調用構造函數，那么會指向全局對象然后你的代碼就會覆蓋的原生。凍結對象最嚴格的防篡改就是凍結對象。中央定時器動畫地址參考書籍高級程序設計忍者秘籍 1 安全類型檢測 javascript內置類型檢測并不可靠 safari某些版本（ var person = {name: wdd}; undefined > Object.preventExtensions(person); Obj...

wean 2019-08-20 15:05 評論0 收藏0
JS程序設計高級技巧

摘要：關于定時器要記住的最重要的事情是指定的時間間隔表示何時將定時器的代碼添加到隊列，而不是何時實際執行代碼。多個定時器之間的執行間隔會比預期的小解決辦法處理中數組分塊，，函數節流，實際進行處理的方法實際執行的代碼初始處理調用的方法一、高級函數安全類型檢測 Object.protitype.toString.call(value) 作用域安全的構造函數 function Pers...

Codeing_ls 2019-08-23 15:06 評論0 收藏0
JS高級定時器

摘要：高級定時器高級技巧異步首先，中沒有代碼是立即執行的，而是一旦進程空閑則立即執行。針對第二種問題，使用定時器是解決方法之一。為定時器設定的時間間隔使得進程有時間在處理項目的事件之間轉入空閑。該函數首先清除之前設置的任何定時器。 title: 高級定時器 date: 2016-12-13 tag: JS高級技巧 0x00 異步首先，JavaScript 中沒有代碼是立即執行的，...

leeon 2019-08-22 10:50 評論0 收藏0
關于javascript 中的高級定時器的若干問題

摘要：閉包閉包是指有權訪問另一個函數作用域中的變量的函數當某個函數被調用時，會創建一個執行環境及相應的作用域鏈。要注意通過第句聲明的這個方法屬于構造函數生成的對象，而不屬于構造函數的變量對象，也就是說，并不存在于作用域鏈中。看到評論里有仁兄建議我試試箭頭函數，真是受寵若驚，本來寫這篇文章也只是想記錄寫要點給自己日后看的。今天早上看到一篇總結javascript中this的文章JavaScr...

zr_hebo 2019-08-21 11:22 評論0 收藏0
初窺JavaScript事件機制的實現（二）—— Node.js中定時器的實現

摘要：下面通過幾個的定時器示例以及相關源碼來分析在中，功能到底是怎么實現的。我們知道，中的定時器并不同于計算機底層的定時中斷。補充資料在高級程序設計第三版第章高級技巧中對高級定時器以及有較詳細的討論。至此，這類定時器函數已經可以為所用了。上一篇博文提到，在Node中timer并不是通過新開線程來實現的，而是直接在event loop中完成。下面通過幾個JavaScript的定時器示例以及N...

novo 2019-08-21 10:33 評論0 收藏0