JavaScript Throttle & Debounce

jone5679 發(fā)布于2019-08-19 17:28 / 3158人閱讀

摘要：無(wú)視一定時(shí)間內(nèi)所有的調(diào)用，適合在發(fā)生頻度比較高的，處理比較重的時(shí)候使用。一定間隔內(nèi)沒(méi)有調(diào)用時(shí)，才開(kāi)始執(zhí)行被調(diào)用方法。

Throttle

無(wú)視一定時(shí)間內(nèi)所有的調(diào)用，適合在發(fā)生頻度比較高的，處理比較重的時(shí)候使用。

var throttle = function (func, threshold, alt) {
    var last = Date.now();
    threshold = threshold || 100;

    return function () {
        var now = Date.now();

        if (now - last < threshold) {
            if (alt) {
                alt.apply(this, arguments);
            }
            return;
        }

        last = now;
        func.apply(this, arguments);
    };
};

Debounce

一定間隔內(nèi)沒(méi)有調(diào)用時(shí)，才開(kāi)始執(zhí)行被調(diào)用方法。

var debounce = function (func, threshold, execASAP) {
    var timeout = null;
    threshold = threshold || 100;

    return function () {
        var self = this;
        var args = arguments;
        var delayed = function () {
            if (!execASAP) {
                func.apply(self, args);
            }
            timeout = null;
        };

        if (timeout) {
            clearTimeout(timeout);
        } else if (execASAP) {
            func.apply(self, args);
        }

        timeout = setTimeout(delayed, threshold);
    };
};

Test

var test = function (wrapper, threshold) {
    var log = function () {
        console.log(Date.now() - start);
    };
    var wrapperedFunc = wrapper(log, threshold);
    var start = Date.now();
    var arr = [];

    for (var i = 0; i < 10; i++) {
        arr.push(wrapperedFunc);
    }

    while(i > 0) {
        var random = Math.random() * 1000;
        console.log("index: " + i);
        console.log("random: " + random);
        setTimeout(arr[--i], random);
    }
};

test(debounce, 1000);
test(throttle, 1000);

云服務(wù)器 GPU云服務(wù)器 throttle debounce asp &amp&amp邏輯 js 2&amp&amp1

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

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

相關(guān)文章

JavaScript Debounce&amp;Throttle

摘要：如果我們的回調(diào)函數(shù)較為復(fù)雜，頁(yè)面的性能就會(huì)變差。而可以保證穩(wěn)定的時(shí)間間隔執(zhí)行一次回調(diào)函數(shù)。但需要弄清楚的是，無(wú)論是還是，控制的都是回調(diào)函數(shù)的執(zhí)行，而不是事件的監(jiān)聽(tīng)。前言假設(shè)現(xiàn)在有個(gè)需求：監(jiān)聽(tīng)滑動(dòng)事件，并執(zhí)行回調(diào)。當(dāng)你用觸摸板或者鼠標(biāo)滑動(dòng)頁(yè)面時(shí)，每秒鐘大概會(huì)觸發(fā)幾十次scroll事件，而當(dāng)你在手機(jī)等移動(dòng)終端上滑動(dòng)頁(yè)面時(shí)，每秒就會(huì)觸發(fā)一百次scroll事件。如果我們的回調(diào)函數(shù)較為復(fù)雜，...

The question 2019-08-22 11:06 評(píng)論0 收藏0
The debounce &amp; throttle in Javascript（防抖與節(jié)流）

摘要：您的支持是我最大的動(dòng)力，我會(huì)保證提供高質(zhì)與清晰的文章與您共同成長(zhǎng)。一些文章中的與上面所談到的設(shè)置類似。防抖防抖技術(shù)允許我們捆綁多個(gè)連續(xù)調(diào)用成為單一的一次調(diào)用。防抖的應(yīng)用這個(gè)簡(jiǎn)單的舉個(gè) 歡迎star和watch我的github issue blog，歡迎加入討論。您的支持是我最大的動(dòng)力，我會(huì)保證提供高質(zhì)與清晰的文章與您共同成長(zhǎng)。節(jié)流[throttle]與防抖[debounce]在前...

XboxYan 2019-08-23 12:46 評(píng)論0 收藏0
快速 TypeScript 化 lodash 中的 throttle &amp; debounce

摘要：背景需要包寫(xiě)起來(lái)爽，然而如果遇到?jīng)]有現(xiàn)成的化的工具函數(shù)，就需要自己想辦法弄出一份類型聲明文件了。最為重要的是，這種遷移方面我們可以隨意自定義化中所需要的工具函數(shù)，遷移粒度都可以由自己控制。 1、背景 1.1、需要 TS 包 TypeScript 寫(xiě)起來(lái)爽，然而如果遇到?jīng)]有現(xiàn)成的 TS 化的工具函數(shù)，就需要自己想辦法弄出一份類型聲明文件了。前兩天要寫(xiě)的小工具庫(kù)（Typescript 語(yǔ)...

lewinlee 2019-08-26 10:18 評(píng)論0 收藏0
【源碼分析】給你幾個(gè)鬧鐘，或許用 10 分鐘就能寫(xiě)出 lodash 中的 debounce &amp

摘要：最簡(jiǎn)單的案例以最簡(jiǎn)單的情景為例在某一時(shí)刻點(diǎn)只調(diào)用一次函數(shù)，那么將在時(shí)間后才會(huì)真正觸發(fā)函數(shù)。后續(xù)我們會(huì)逐漸增加黑色鬧鐘出現(xiàn)的復(fù)雜度，不斷去分析紅色鬧鐘的位置。序相比網(wǎng)上教程中的 debounce 函數(shù)，lodash 中的 debounce 功能更為強(qiáng)大，相應(yīng)的理解起來(lái)更為復(fù)雜；解讀源碼一般都是直接拿官方源碼來(lái)解讀，不過(guò)這次我們采用另外的方式：從最簡(jiǎn)單的場(chǎng)景開(kāi)始寫(xiě)代碼，然后慢慢往源碼...

余學(xué)文 2019-08-26 10:19 評(píng)論0 收藏0
js中函數(shù)節(jié)流&amp;函數(shù)去抖

摘要：節(jié)流保證在一定時(shí)間內(nèi)，只能觸發(fā)一次。我們?cè)趪L試一下去抖消抖，消除抖動(dòng)，感覺(jué)這個(gè)更好聽(tīng)有沒(méi)有什么現(xiàn)成的上的一次發(fā)現(xiàn)源碼的經(jīng)歷以及對(duì)學(xué)術(shù)界拿來(lái)主義的思考函數(shù)節(jié)流和函數(shù)去抖應(yīng)用場(chǎng)景辨析函數(shù)去抖的實(shí)現(xiàn) 開(kāi)篇先提幾個(gè)問(wèn)題？ 1.做搜索框的時(shí)候你使用什么事件？change?blur?keyup？你想要的效果是什么？ 2.scroll事件怎么就觸發(fā)？是滾一段距離觸發(fā)一次？還是滾一圈觸發(fā)一次？還是滾...

王軍 2019-08-22 10:42 評(píng)論0 收藏0