JavaScript Throttle & Debounce

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

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

Throttle

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

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)沒有調(diào)用時，才開始執(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);

云服務器 GPU云服務器 throttle debounce asp &amp&amp邏輯 js 2&amp&amp1

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

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

相關(guān)文章

JavaScript Debounce&amp;Throttle

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

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

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

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

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

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

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

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

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

王軍 2019-08-22 10:42 評論0 收藏0