關于性能優化的那點事——函數防抖

Stardustsky 發布于2019-08-21 14:21 / 1014人閱讀

摘要：函數防抖場景假設網站有個搜索框用戶輸入文本我們會自動聯想匹配出一些結果供用戶選擇我們可能首先想到的做法就是監聽事件然后異步查詢結果但是如果用戶快速的輸入了一串字符假設是個字符那么就會在瞬間觸發次請求這無疑不是我們想要的我們想要的是用戶停止輸

函數防抖 場景

假設網站有個搜索框, 用戶輸入文本我們會自動聯想匹配出一些結果供用戶選擇,我們可能首先想到的做法就是監聽keypress事件, 然后異步查詢結果. 但是如果用戶快速的輸入了一串字符, 假設是10個字符, 那么就會在瞬間觸發10次請求, 這無疑不是我們想要的, 我們想要的是用戶停止輸入的時候才去觸發查詢的請求.

原理

函數防抖就是讓某個函數在上一次執行后, 滿足等待某個時間內不再觸發此函數后再執行, 而在這個等待時間內再次觸發此函數, 等待時間會重新計算.

實現

underscore.js的函數防抖定義: _.debounce(fn, wait, [immediate]);

debounce接收三個參數:
@params fn: 需要進行函數防抖的函數;
@params wait: 需要等待的時間, 單位為毫秒;
@params immediate: 如果為true, 則debounce會在調用時立刻執行一次fn,
                   而不需要等到wait結束后.

_.debounce = function(fn, wait, immediate) {
    var timeout,
        args,
        context,
        timestamp,
        result;

    var later = function() {
        var last = _.now() - timestamp;

        if(last < wait && last >= 0) {
            timeout = setTimeout(later, wait - last);
        } else {
            timeout = null;
            if(!immediate) {
                result = fn.apply(context, args);

                if(!timeout) {
                    context = args = null;
                }
            }
        }
    };

    return function() {
        context = this;
        args = arguments;
        timestamp = _.now();
        var callNow = immediate && !timeout;

        if(!timeout) {
            timeout = setTimeout(later, wait);
        }

        if(callNow) {
            result = fn.apply(context, args);
            context = args = null;
        }

        return result;
    }
};

// demo:
$("#input").keypress(_.debounce(function() {
    //異步調用查詢
}, 300));

GPU云服務器云服務器關于服務器的優化函數優化性能優化關于c語言函數返回值

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

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

關于性能優化的那點事——函數節流

摘要：函數節流背景中的函數大多數情況下都是由用戶主動調用觸發的除非是函數本身的實現不合理否則一般不會遇到跟性能相關的問題但在少數情況下函數的觸發不是由用戶直接控制的在這些場景下函數可能被非常頻繁調用而造成大的性能問題場景事件事件滾動事件共同的特征函數節流背景 javascript中的函數大多數情況下都是由用戶主動調用觸發的, 除非是函數本身的實現不合理, 否則一般不會遇到跟性能相關的問題...

khlbat 2019-08-20 10:31 評論0 收藏0
關于性能優化的那點事——BigRender首屏渲染優化

摘要：首屏渲染優化背景一個龐大的頁面有時我們并不會滾動去看下面的內容這樣就造成了非首屏部分的渲染這些無用的渲染不僅包括圖片還包括其他元素甚至一些某些根據模塊請求比如理論上每增加一個都會增加渲染的時間并且影響著頁面打開的加載速度這時就需要一種辦法使 BigRender首屏渲染優化背景一個龐大的頁面, 有時我們并不會滾動去看下面的內容, 這樣就造成了非首屏部分的渲染, 這些無用的渲染不僅包括...

Markxu 2019-08-20 10:35 評論0 收藏0
關于localStorage面試的那點事

摘要：已經超出本地存儲限定大小可進行超出限定大小之后的操作，如下面可以先清除記錄，再次保存面試官一波素質三連對于只是會使用的同學來說，肯定是不得其解的。最近面試的時候關于html5API總會被問到localStorage的問題，對于一般的問題很簡單，無非就是 localStorage、sessionStorage和cookie這三個客戶端緩存的區別 localStorage的API，g...

timger 2019-08-01 17:57 評論0 收藏0
關于var，let，const的那點事

摘要：一直使用定義變量，的出現給變量定義增加了兩個大將，。聲明的變量，塊作用域，不重復聲明覆蓋，限制了變量的作用域，保證變量不會去污染全局變量，所以盡量將改為用。一直使用var定義變量，ES6的出現給變量定義增加了兩個大將let，const。那它們有什么區別呢。 1、const關鍵字它的作用就是定義一個常量,一旦定義無法更改，不能重復聲明覆蓋； showImg(https://segmen...

KavenFan 2019-08-20 14:26 評論0 收藏0
寫技術博客那點事

摘要：從現在開始，養成寫技術博客的習慣，或許可以在你的職業生涯發揮著不可忽略的作用。如果想了解更多優秀的前端資料，建議收藏下前端英文網站匯總這個網站，收錄了國外一些優質的博客及其視頻資料。前言寫文章是一個短期收益少，長期收益很大的一件事情，人們總是高估短期收益，低估長期收益。往往是很多人堅持不下來，特別是寫文章的初期，剛寫完文章沒有人閱讀會有一種挫敗感，影響了后期創作。從某種意義上說，...

ddongjian0000 2019-08-23 15:12 評論0 收藏0