JavaScript Throttle & Debounce

jone5679 發布于2019-08-19 17:28 / 3145人閱讀

摘要：無視一定時間內所有的調用，適合在發生頻度比較高的，處理比較重的時候使用。一定間隔內沒有調用時，才開始執行被調用方法。

Throttle

無視一定時間內所有的調用，適合在發生頻度比較高的，處理比較重的時候使用。

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

一定間隔內沒有調用時，才開始執行被調用方法。

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

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

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

JavaScript Debounce&amp;Throttle

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

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

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

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

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

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

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

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

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

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