成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

rubyshen / 1333人閱讀

摘要：為了規(guī)避這個問題，可以使用定時器對事件處理程序進行節(jié)流。當?shù)诙握{(diào)用該函數(shù)時，它會清除前一次的定時器，并設(shè)置另一個。如果前一個定時器已經(jīng)執(zhí)行過了，這個操作就沒有任何意義。然而如果前一個定時器尚未執(zhí)行，其實就是將其替換為一個新的定時器。

高級定時器

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

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

避免使用arguments.callee：

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

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

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

數(shù)據(jù)是否必須按順序完成？

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

setTimeout(function() {
    //取出下一個條目處理
    var item = array.shift();
    process(item);
    //還有條目，再設(shè)置一個定時器
    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 用時
函數(shù)節(jié)流

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

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

var processor = {
    timeoutId: null,

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

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

只要代碼是周期性執(zhí)行的， 都應(yīng)該用節(jié)流。 處理的速率根據(jù)需求設(shè)置， 上面的例子是1000毫秒。

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/78806.html

相關(guān)文章

  • JavaScript 高級技巧

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

    wean 評論0 收藏0

  • JS程序設(shè)計高級技巧

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

    Codeing_ls 評論0 收藏0

  • JS高級定時器

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

    leeon 評論0 收藏0

  • 關(guān)于javascript 中的高級定時器的若干問題

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

    zr_hebo 評論0 收藏0

  • 初窺JavaScript事件機制的實現(xiàn)（二）—— Node.js中定時器的實現(xiàn)

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

    novo 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<