成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JS專題之去抖函數(shù)

ivydom / 1586人閱讀

摘要：如果本次定時(shí)器沒有被清除，時(shí)間到后就會自然執(zhí)行事件處理函數(shù)。綁定去抖后的事件回調(diào)函數(shù)綁定回調(diào)函數(shù)的屬性方法，點(diǎn)擊頁面，重置去抖效果異步請求清空上一次事件觸發(fā)的定時(shí)器重置為從而下一次事件觸發(fā)就能立即執(zhí)行。

一、前言

為什么會有去抖和節(jié)流這類工具函數(shù)？

在用戶和前端頁面的交互過程中，很多操作的觸發(fā)頻率非常高，比如鼠標(biāo)移動 mousemove 事件, 滾動條滑動 scroll 事件, 輸入框 input 事件, 鍵盤 keyup 事件，瀏覽器窗口 resize 事件。

在以上事件上綁定回調(diào)函數(shù)，如果回調(diào)函數(shù)是一些需要大量計(jì)算、消耗內(nèi)存、HTTP 請求、DOM 操作等，那么應(yīng)用的性能和體驗(yàn)就會非常的差。

去抖和節(jié)流函數(shù)的根據(jù)思想就是，減少高頻率事件處理函數(shù) handler 的執(zhí)行頻率（注意是事件處理函數(shù)，不是事件回調(diào)函數(shù)），將多次事件的回調(diào)合并成一個(gè)回調(diào)來執(zhí)行，從而優(yōu)化性能。

二、簡單版去抖（debounce）

去抖(debounce)，也叫防抖，那抖動指的是什么呢？抖動意味著操作的不穩(wěn)定性，你可以理解成躁動癥，安靜不下來~防抖的含義便是為了防止抖動造成的結(jié)果不準(zhǔn)確，等到穩(wěn)定的時(shí)候再處理結(jié)果。

比如在輸入事件，鼠標(biāo)移動，滾動條滑動，鍵盤敲擊事件中，等到停止事件觸發(fā)，頻率穩(wěn)定為零后，才開始執(zhí)行回調(diào)函數(shù)，也就是所謂的沒有抖動后處理。

個(gè)人總結(jié)：去抖，就是事件觸發(fā)頻率穩(wěn)定后，才開始執(zhí)行回調(diào)函數(shù), 一連串的事件觸發(fā)，但只進(jìn)行一次事件處理。

頻率就是單位時(shí)間觸發(fā)的次數(shù)，如果單位時(shí)間內(nèi)，事件觸發(fā)超過一次，就只執(zhí)行最后一次，如果單位時(shí)間內(nèi)沒有觸發(fā)超過一次，那就正常執(zhí)行。去抖分為延遲執(zhí)行和立即執(zhí)行兩種思路。

看一個(gè)簡單版的去抖函數(shù)延遲執(zhí)行實(shí)現(xiàn)：


    輸入框：

上面代碼中我的注釋已經(jīng)能夠說明整個(gè)去抖的過程，再來啰嗦幾句話~

debounce 函數(shù)在主線程順序執(zhí)行時(shí)已經(jīng)被調(diào)用，傳入的參數(shù)一個(gè)是真正想在事件觸發(fā)執(zhí)行的事件處理函數(shù)

另一個(gè)參數(shù)是事件觸發(fā)的間隔時(shí)間，間隔時(shí)間內(nèi)再次觸發(fā)事件，則重新計(jì)時(shí)，類似于罰你 5 分鐘內(nèi)不準(zhǔn)說話，時(shí)間到后就可以開始說話，如果 5 分鐘內(nèi)說話了，則再罰你 5 分鐘內(nèi)不準(zhǔn)說話，以此類推~

debounce 函數(shù)有一個(gè) timer 內(nèi)部變量，timer 在返回的執(zhí)行函數(shù)中被訪問，形成了閉包，有關(guān)閉包的內(nèi)容，可以翻看我之前的文章《JavaScript之閉包》

bebounce 函數(shù)返回的匿名函數(shù)才是 input 事件的回調(diào)函數(shù)，所以該匿名函數(shù)有一個(gè)默認(rèn)參數(shù) event 對象。

同第 4 點(diǎn)，匿名函數(shù)是 dom 元素注冊事件的回調(diào)函數(shù)，所以匿名函數(shù)（回調(diào)函數(shù)）的 this 指向 HTMLInput 元素。

同第 2 點(diǎn)，觸發(fā)函數(shù)后，如果發(fā)現(xiàn)閉包中保存著 timer 變量, timer 變量初始值為 null, 之后觸發(fā)定時(shí)器后，timer 為當(dāng)次定時(shí)器的 id，id 是一個(gè)數(shù)字。去抖的過程在于，如果在定時(shí)器的間隔時(shí)間內(nèi)觸發(fā)了函數(shù)，它會把上一次事件觸發(fā)時(shí)定義的定時(shí)器清除，又重新定義一個(gè)定時(shí)器。如果本次定時(shí)器沒有被清除，時(shí)間到后就會自然執(zhí)行事件處理函數(shù)。對這個(gè)過程有困惑的同學(xué)，可以把 timer 變量在 clearTimeout 之前打印出來就明白了。

延時(shí)執(zhí)行了事件處理函數(shù)（handler），需要傳遞調(diào)用對象和事件對象過去，此處 call 可以和 apply 互換，如果用 apply, 傳遞 arguments 類數(shù)組即可。這樣保證了參數(shù)的一致性，就像沒被 debounce 處理過一樣。

以上就是去抖函數(shù)的基本思想, 可以參考示意圖

下面這張圖是高設(shè) 3 里講的節(jié)流函數(shù)，其實(shí)是這一節(jié)所說的去抖函數(shù)，高設(shè) 3 將 timer 變量用傳入的處理函數(shù)的屬性代替了而已。

三、立即執(zhí)行

第二節(jié)的簡單版去抖函數(shù)能滿足大部分只需要觸發(fā)一次事件處理的去抖場景：輸入數(shù)據(jù)查詢事件，下拉滾動條到窗口底部懶加載數(shù)據(jù)。

但是有一個(gè)問題，假如我想輸入框輸入內(nèi)容時(shí)，第一個(gè)字輸完就請數(shù)據(jù)怎么做？ 你可以理解為，你可以馬上開始說話，但是說完話后 5 分鐘不能說話，如果 5 分鐘內(nèi)說話，則接下來再加 5 分鐘不能說話。如果 5 分鐘后沒說話， 那么接下來，你又可以先說話，然后閉嘴 5 分鐘~

所以，引出來了立即執(zhí)行版的去抖函數(shù)。

取消功能實(shí)現(xiàn)


    輸入框：

上面代碼的注釋，可以解釋整個(gè)流程，下面大致說一下：

非立即執(zhí)行版本和前一節(jié)內(nèi)容一樣，跳過。

timer 初始值為 null, 第一次觸發(fā)為立即執(zhí)行，!timer 為 true, 所以能夠立即調(diào)用事件處理函數(shù)。

每次事件觸發(fā)， 都會把 timer 重新賦值，在間隔時(shí)間到之前 timer 為數(shù)字 id, !timer 為 false, 所以不能立即執(zhí)行。如果間隔時(shí)間到了，會把當(dāng)次事件觸發(fā)的定時(shí)器 id 置為 null, 下一次事件觸發(fā)就能立即執(zhí)行了。

朋友們可以通過觀察 timer 值的變化，思考整個(gè)過程，timer 在去抖的過程中充當(dāng) flag 的作用，可以用來判斷能否立即執(zhí)行。

看看效果：

取消函數(shù)

假如去抖函數(shù)的間隔時(shí)間為 5 秒鐘，我在這 5 秒鐘內(nèi)又想立即執(zhí)行可以怎么做？于是我們給回調(diào)函數(shù)加個(gè)取消函數(shù)屬性。

函數(shù)也是一個(gè)對象，可以像其他一般對象那樣添加方法：


    輸入框：

看看效果：

總結(jié)

去抖函數(shù)的意義在于合并多次事件觸發(fā)為一次事件處理，從而降低事件處理函數(shù)可能引發(fā)的大量重繪重排，http 請求，內(nèi)存占用和頁面卡頓。

另外，本文有關(guān) this, call, apply，閉包的知識，可以翻看我之前分享的文章。

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

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

相關(guān)文章

  • JS專題之?dāng)?shù)組去重

    摘要：將元素作為對象的鍵，默認(rèn)鍵對應(yīng)的值為如果對象中沒有這個(gè)鍵，則將這個(gè)元素放入結(jié)果數(shù)組中去。 前言 數(shù)組去重在日常開發(fā)中的使用頻率還是較高的，也是網(wǎng)上隨便一抓一大把的話題，所以，我寫這篇文章目的在于歸納和總結(jié)，既然很多人都在提的數(shù)組去重，自己到底了解多少呢。又或者是如果自己在開發(fā)中遇到了去重的需求，自己能想到更好的解決方案嗎。 這次我們來理一理怎么做數(shù)組去重才能做得最合適，既要考慮兼容性，...

    only_do 評論0 收藏0

  • JS專題之節(jié)流函數(shù)

    摘要：一什么是節(jié)流節(jié)流函數(shù)就是讓事件處理函數(shù)在大于等于執(zhí)行周期時(shí)才能執(zhí)行，周期之內(nèi)不執(zhí)行，即事件一直被觸發(fā)，那么事件將會按每小段固定時(shí)間一次的頻率執(zhí)行。我們通過一個(gè)簡單的示意來理解節(jié)流函數(shù)可以用時(shí)間戳和定時(shí)器兩種方式進(jìn)行處理。 本文共 2000 字，讀完只需 8 分鐘 上一篇文章講了去抖函數(shù)，然后這一篇講同樣為了優(yōu)化性能，降低事件處理頻率的節(jié)流函數(shù)。 一、什么是節(jié)流？ 節(jié)流函數(shù)（thrott...

    huaixiaoz 評論0 收藏0

  • 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 評論0 收藏0

  • lodash源碼分析之去重--uniq方法

    摘要：包是開發(fā)中常用的工具包，里面有許多實(shí)用的方法，今天分析常用的一個(gè)去重方法用法源碼包可以看到，函數(shù)這邊只做了一個(gè)針對的封裝，所以繼續(xù)看源碼 lodash.js包是node開發(fā)中常用的js工具包，里面有許多實(shí)用的方法，今天分析常用的一個(gè)去重方法---uniq 用法 _.uniq([2, 1, 2]) // => [2, 1] 源碼包 // uniq.js i...

    Hujiawei 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<