關于性能優(yōu)化的那點事——函數(shù)防抖

Stardustsky 發(fā)布于2019-08-21 14:21 / 1023人閱讀

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

函數(shù)防抖 場景

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

原理

函數(shù)防抖就是讓某個函數(shù)在上一次執(zhí)行后, 滿足等待某個時間內(nèi)不再觸發(fā)此函數(shù)后再執(zhí)行, 而在這個等待時間內(nèi)再次觸發(fā)此函數(shù), 等待時間會重新計算.

實現(xiàn)

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

debounce接收三個參數(shù):
@params fn: 需要進行函數(shù)防抖的函數(shù);
@params wait: 需要等待的時間, 單位為毫秒;
@params immediate: 如果為true, 則debounce會在調(diào)用時立刻執(zhí)行一次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() {
    //異步調(diào)用查詢
}, 300));

云服務器 GPU云服務器關于服務器的優(yōu)化函數(shù)優(yōu)化性能優(yōu)化關于c語言函數(shù)返回值

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

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

關于性能優(yōu)化的那點事——函數(shù)節(jié)流

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

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

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

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

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

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

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

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

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

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