成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

Stardustsky / 1074人閱讀

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

函數(shù)防抖 場(chǎng)景

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

原理

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

實(shí)現(xiàn)

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

debounce接收三個(gè)參數(shù):
@params fn: 需要進(jìn)行函數(shù)防抖的函數(shù);
@params wait: 需要等待的時(shí)間, 單位為毫秒;
@params immediate: 如果為true, 則debounce會(huì)在調(diào)用時(shí)立刻執(zhí)行一次fn,
                   而不需要等到wait結(jié)束后.

_.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));

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/87891.html

相關(guān)文章

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

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

    khlbat 評(píng)論0 收藏0

  • 關(guān)于性能優(yōu)化的那點(diǎn)事——BigRender首屏渲染優(yōu)化

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

    Markxu 評(píng)論0 收藏0

  • 關(guān)于localStorage面試的那點(diǎn)事

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

    timger 評(píng)論0 收藏0

  • 關(guān)于var，let，const的那點(diǎn)事

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

    KavenFan 評(píng)論0 收藏0

  • 寫技術(shù)博客那點(diǎn)事

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

    ddongjian0000 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<