国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

JavaScript專題之跟著underscore學(xué)防抖

sutaking / 2406人閱讀

摘要:專題系列預(yù)計(jì)寫二十篇左右,主要研究日常開發(fā)中一些功能點(diǎn)的實(shí)現(xiàn),比如防抖節(jié)流去重類型判斷拷貝最值扁平柯里遞歸亂序排序等,特點(diǎn)是研究和的實(shí)現(xiàn)方式。如果有錯(cuò)誤或者不嚴(yán)謹(jǐn)?shù)牡胤剑?qǐng)務(wù)必給予指正,十分感謝。

JavaScript 專題系列第一篇,講解防抖,帶你從零實(shí)現(xiàn)一個(gè) underscore 的 debounce 函數(shù)

前言

在前端開發(fā)中會(huì)遇到一些頻繁的事件觸發(fā),比如:

window 的 resize、scroll

mousedown、mousemove

keyup、keydown
……

為此,我們舉個(gè)示例代碼來了解事件如何頻繁的觸發(fā):

我們寫個(gè) index.html 文件:





    
    
    debounce
    



    

debounce.js 文件的代碼如下:

var count = 1;
var container = document.getElementById("container");

function getUserAction() {
    container.innerHTML = count++;
};

container.onmousemove = getUserAction;

我們來看看效果:

從左邊滑到右邊就觸發(fā)了 165 次 getUserAction 函數(shù)!

因?yàn)檫@個(gè)例子很簡(jiǎn)單,所以瀏覽器完全反應(yīng)的過來,可是如果是復(fù)雜的回調(diào)函數(shù)或是 ajax 請(qǐng)求呢?假設(shè) 1 秒觸發(fā)了 60 次,每個(gè)回調(diào)就必須在 1000 / 60 = 16.67ms 內(nèi)完成,否則就會(huì)有卡頓出現(xiàn)。

為了解決這個(gè)問題,一般有兩種解決方案:

debounce 防抖

throttle 節(jié)流

防抖

今天重點(diǎn)講講防抖的實(shí)現(xiàn)。

防抖的原理就是:你盡管觸發(fā)事件,但是我一定在事件觸發(fā) n 秒后才執(zhí)行,如果你在一個(gè)事件觸發(fā)的 n 秒內(nèi)又觸發(fā)了這個(gè)事件,那我就以新的事件的時(shí)間為準(zhǔn),n 秒后才執(zhí)行,總之,就是要等你觸發(fā)完事件 n 秒內(nèi)不再觸發(fā)事件,我才執(zhí)行,真是任性吶!

第一版

根據(jù)這段表述,我們可以寫第一版的代碼:

// 第一版
function debounce(func, wait) {
    var timeout;
    return function () {
        clearTimeout(timeout)
        timeout = setTimeout(func, wait);
    }
}

如果我們要使用它,以最一開始的例子為例:

container.onmousemove = debounce(getUserAction, 1000);

現(xiàn)在隨你怎么移動(dòng),反正你移動(dòng)完 1000ms 內(nèi)不再觸發(fā),我才執(zhí)行事件。看看使用效果:

頓時(shí)就從 165 次降低成了 1 次!

棒棒噠,我們接著完善它。

this

如果我們?cè)?getUserAction 函數(shù)中 console.log(this),在不使用 debounce 函數(shù)的時(shí)候,this 的值為:

但是如果使用我們的 debounce 函數(shù),this 就會(huì)指向 Window 對(duì)象!

所以我們需要將 this 指向正確的對(duì)象。

我們修改下代碼:

// 第二版
function debounce(func, wait) {
    var timeout;

    return function () {
        var context = this;

        clearTimeout(timeout)
        timeout = setTimeout(function(){
            func.apply(context)
        }, wait);
    }
}

現(xiàn)在 this 已經(jīng)可以正確指向了。讓我們看下個(gè)問題:

event 對(duì)象

JavaScript 在事件處理函數(shù)中會(huì)提供事件對(duì)象 event,我們修改下 getUserAction 函數(shù):

function getUserAction(e) {
    console.log(e);
    container.innerHTML = count++;
};

如果我們不使用 debouce 函數(shù),這里會(huì)打印 MouseEvent 對(duì)象,如圖所示:

但是在我們實(shí)現(xiàn)的 debounce 函數(shù)中,卻只會(huì)打印 undefined!

所以我們?cè)傩薷囊幌麓a:

// 第三版
function debounce(func, wait) {
    var timeout;

    return function () {
        var context = this;
        var args = arguments;

        clearTimeout(timeout)
        timeout = setTimeout(function(){
            func.apply(context, args)
        }, wait);
    }
}

到此為止,我們修復(fù)了兩個(gè)小問題:

this 指向

event 對(duì)象

立刻執(zhí)行

這個(gè)時(shí)候,代碼已經(jīng)很是完善了,但是為了讓這個(gè)函數(shù)更加完善,我們接下來思考一個(gè)新的需求。

這個(gè)需求就是:

我不希望非要等到事件停止觸發(fā)后才執(zhí)行,我希望立刻執(zhí)行函數(shù),然后等到停止觸發(fā) n 秒后,才可以重新觸發(fā)執(zhí)行。

想想這個(gè)需求也是很有道理的嘛,那我們加個(gè) immediate 參數(shù)判斷是否是立刻執(zhí)行。

// 第四版
function debounce(func, wait, immediate) {

    var timeout, result;

    return function () {
        var context = this;
        var args = arguments;

        if (timeout) clearTimeout(timeout);
        if (immediate) {
            // 如果已經(jīng)執(zhí)行過,不再執(zhí)行
            var callNow = !timeout;
            timeout = setTimeout(function(){
                timeout = null;
            }, wait)
            if (callNow) func.apply(context, args)
        }
        else {
            timeout = setTimeout(function(){
                func.apply(context, args)
            }, wait);
        }
    }
}

再來看看使用效果:

返回值

此時(shí)注意一點(diǎn),就是 getUserAction 函數(shù)可能是有返回值的,所以我們也要返回函數(shù)的執(zhí)行結(jié)果,但是當(dāng) immediate 為 false 的時(shí)候,因?yàn)槭褂昧?setTimeout ,我們將 func.apply(context, args) 的返回值賦給變量,最后再 return 的時(shí)候,值將會(huì)一直是 undefined,所以我們只在 immediate 為 true 的時(shí)候返回函數(shù)的執(zhí)行結(jié)果。

// 第五版
function debounce(func, wait, immediate) {

    var timeout, result;

    return function () {
        var context = this;
        var args = arguments;

        if (timeout) clearTimeout(timeout);
        if (immediate) {
            // 如果已經(jīng)執(zhí)行過,不再執(zhí)行
            var callNow = !timeout;
            timeout = setTimeout(function(){
                timeout = null;
            }, wait)
            if (callNow) result = func.apply(context, args)
        }
        else {
            timeout = setTimeout(function(){
                func.apply(context, args)
            }, wait);
        }
        return result;
    }
}
取消

最后我們?cè)偎伎家粋€(gè)小需求,我希望能取消 debounce 函數(shù),比如說我 debounce 的時(shí)間間隔是 10 秒鐘,immediate 為 true,這樣的話,我只有等 10 秒后才能重新觸發(fā)事件,現(xiàn)在我希望有一個(gè)按鈕,點(diǎn)擊后,取消防抖,這樣我再去觸發(fā),就可以又立刻執(zhí)行啦,是不是很開心?

為了這個(gè)需求,我們寫最后一版的代碼:

// 第六版
function debounce(func, wait, immediate) {

    var timeout, result;

    var debounced = function () {
        var context = this;
        var args = arguments;

        if (timeout) clearTimeout(timeout);
        if (immediate) {
            // 如果已經(jīng)執(zhí)行過,不再執(zhí)行
            var callNow = !timeout;
            timeout = setTimeout(function(){
                timeout = null;
            }, wait)
            if (callNow) result = func.apply(context, args)
        }
        else {
            timeout = setTimeout(function(){
                func.apply(context, args)
            }, wait);
        }
        return result;
    };

    debounced.cancel = function() {
        clearTimeout(timeout);
        timeout = null;
    };

    return debounced;
}

那么該如何使用這個(gè) cancel 函數(shù)呢?依然是以上面的 demo 為例:

var count = 1;
var container = document.getElementById("container");

function getUserAction(e) {
    container.innerHTML = count++;
};

var setUseAction = debounce(getUserAction, 10000, true);

container.onmousemove = setUseAction;

document.getElementById("button").addEventListener("click", function(){
    setUseAction.cancel();
})

演示效果如下:

至此我們已經(jīng)完整實(shí)現(xiàn)了一個(gè) underscore 中的 debounce 函數(shù),恭喜,撒花!

演示代碼

相關(guān)的代碼可以在 Github 博客倉庫 中找到

專題系列

JavaScript專題系列目錄地址:https://github.com/mqyqingfeng/Blog。

JavaScript專題系列預(yù)計(jì)寫二十篇左右,主要研究日常開發(fā)中一些功能點(diǎn)的實(shí)現(xiàn),比如防抖、節(jié)流、去重、類型判斷、拷貝、最值、扁平、柯里、遞歸、亂序、排序等,特點(diǎn)是研(chao)究(xi) underscore 和 jQuery 的實(shí)現(xiàn)方式。

如果有錯(cuò)誤或者不嚴(yán)謹(jǐn)?shù)牡胤剑?qǐng)務(wù)必給予指正,十分感謝。如果喜歡或者有所啟發(fā),歡迎 star,對(duì)作者也是一種鼓勵(lì)。

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

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

相關(guān)文章

  • JavaScript專題系列文章

    摘要:專題系列共計(jì)篇,主要研究日常開發(fā)中一些功能點(diǎn)的實(shí)現(xiàn),比如防抖節(jié)流去重類型判斷拷貝最值扁平柯里遞歸亂序排序等,特點(diǎn)是研究專題之函數(shù)組合專題系列第十六篇,講解函數(shù)組合,并且使用柯里化和函數(shù)組合實(shí)現(xiàn)模式需求我們需要寫一個(gè)函數(shù),輸入,返回。 JavaScript 專題之從零實(shí)現(xiàn) jQuery 的 extend JavaScritp 專題系列第七篇,講解如何從零實(shí)現(xiàn)一個(gè) jQuery 的 ext...

    Maxiye 評(píng)論0 收藏0
  • JavaScript專題系列20篇正式完結(jié)!

    摘要:寫在前面專題系列是我寫的第二個(gè)系列,第一個(gè)系列是深入系列。專題系列自月日發(fā)布第一篇文章,到月日發(fā)布最后一篇,感謝各位朋友的收藏點(diǎn)贊,鼓勵(lì)指正。 寫在前面 JavaScript 專題系列是我寫的第二個(gè)系列,第一個(gè)系列是 JavaScript 深入系列。 JavaScript 專題系列共計(jì) 20 篇,主要研究日常開發(fā)中一些功能點(diǎn)的實(shí)現(xiàn),比如防抖、節(jié)流、去重、類型判斷、拷貝、最值、扁平、柯里...

    sixleaves 評(píng)論0 收藏0
  • JavaScript專題跟著 underscore 學(xué)節(jié)流

    摘要:關(guān)于節(jié)流的實(shí)現(xiàn),有兩種主流的實(shí)現(xiàn)方式,一種是使用時(shí)間戳,一種是設(shè)置定時(shí)器。當(dāng)觸發(fā)事件的時(shí)候,我們?cè)O(shè)置一個(gè)定時(shí)器,再觸發(fā)事件的時(shí)候,如果定時(shí)器存在,就不執(zhí)行,直到定時(shí)器執(zhí)行,然后執(zhí)行函數(shù),清空定時(shí)器,這樣就可以設(shè)置下個(gè)定時(shí)器。 JavaScript 專題系列第二篇,講解節(jié)流,帶你從零實(shí)現(xiàn)一個(gè) underscore 的 throttle 函數(shù) 前言 在《JavaScript專題之跟著und...

    JerryC 評(píng)論0 收藏0
  • 20190726-前端筆記-防抖和節(jié)流

    摘要:定義定時(shí)器清空定時(shí)器重置定時(shí)器防抖流程觸發(fā)觸發(fā)定義一個(gè)定時(shí)器,返回執(zhí)行內(nèi)容為清除當(dāng)前定時(shí)器,定義執(zhí)行內(nèi)容。 防抖 為了避免一些監(jiān)聽事件為在自己預(yù)料的情況,頻繁觸發(fā)。or 在某些監(jiān)聽命令會(huì)頻繁觸發(fā)事件比如resize、mousemove等等 未防抖 示例 var count = 0, Elem = doc.getElementById(con) ...

    Thanatos 評(píng)論0 收藏0
  • 20190726-前端筆記-防抖和節(jié)流

    摘要:定義定時(shí)器清空定時(shí)器重置定時(shí)器防抖流程觸發(fā)觸發(fā)定義一個(gè)定時(shí)器,返回執(zhí)行內(nèi)容為清除當(dāng)前定時(shí)器,定義執(zhí)行內(nèi)容。 防抖 為了避免一些監(jiān)聽事件為在自己預(yù)料的情況,頻繁觸發(fā)。or 在某些監(jiān)聽命令會(huì)頻繁觸發(fā)事件比如resize、mousemove等等 未防抖 示例 var count = 0, Elem = doc.getElementById(con) ...

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

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<