首先描述一下我所使用的業(yè)務(wù)場景：系統(tǒng)有一個批量審批的功能，每個審批的流程需要根據(jù)提交的用戶實時的反饋回去進去用戶頁面的刷新，如果一個用戶同時有多個流程被審批通過，前端會向服務(wù)端頻繁的多次調(diào)用同一個接口，造成服務(wù)器壓力過大和頁面卡頓，非常影響用戶體驗。
目標(biāo)：需要短時間內(nèi)向服務(wù)端頻繁調(diào)用接口時只去調(diào)用最后一次的接口。（防抖）
防抖和節(jié)流的區(qū)別：主要體現(xiàn)在執(zhí)行次數(shù)上的區(qū)別，比如我們寫一個200ms的延遲時間，節(jié)流就是每200ms執(zhí)行一次，而抖動是只有在最后一次事件的200ms內(nèi)調(diào)用一次回調(diào)函數(shù)。
防抖和節(jié)流都可以用于 mousemove、scroll、resize、input、click等事件，他們的區(qū)別在于防抖只會在連續(xù)的事件周期結(jié)束時執(zhí)行一次，而節(jié)流會在事件周期內(nèi)按間隔時間有規(guī)律的執(zhí)行多次。
防抖 debounce
當(dāng)事件被頻繁觸發(fā)時，在一定的時間內(nèi)再去執(zhí)行回調(diào)函數(shù)，如果在等待期間再次被觸發(fā)，則重新計時，直至整個等待期間沒有新的事件被觸發(fā)，執(zhí)行回調(diào)函數(shù)。
舉個例子：一個點擊事件，為了防止用戶重復(fù)發(fā)起請求，如果用戶在三秒內(nèi)多次發(fā)生點擊事件，點擊事件將只執(zhí)行一次，第一次和第二次點擊的間隔只要在三秒鐘內(nèi)就會重置這個等待時間，第二次和第三次之間的最大等待時間也是三秒，如果第二次點擊事件發(fā)生后的三秒內(nèi)沒有新的點擊事件產(chǎn)生，第二次點擊后的三秒就會調(diào)用回調(diào)函數(shù)。
可以直接引用loadsh的debounce方法來實現(xiàn)函數(shù)防抖，也可以自己寫一個防抖函數(shù)（利用定時器）
-
引用loadsh
這里先給一個中文文檔的地址：https://www.lodashjs.com/docs/lodash.debounce
在vue3.x中也推薦了這種方式：https://v3.vuejs.org/guide/data-methods.html#methods
有多種引用方式，這里我直接采用npm的方式
npm i --save lodash
使用loadsh的debounce方法
<el-button id="myBtn" type="goon" icon="el-icon-search" @click="test">點擊事件</el-button>
let _ = require('lodash'); _.debounce(fun,ms,options) fun: 回調(diào)函數(shù)
ms:等待時間,毫秒
options:選項對象
注意：這里點擊事件要寫成test： 的形式，test()這樣是不生效的
import debounce from 'lodash/debounce' methods:{ test:debounce(()=>{ console.log("防抖函數(shù)執(zhí)行",) },3000) } document.getElementById("myBtn").addEventListener('click', debounce(function (event) { console.log("防抖函數(shù)執(zhí)行",) }, 3000))
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
自定義防抖函數(shù)
<el-button type="goon" icon="el-icon-search" @click="test">點擊事件</el-button>
data:{ timer:null }, methods:{ test(){ clearTimeout(this.timer) this.timer = setTimeout(()=>{ console.log("防抖執(zhí)行,這里就是你需要執(zhí)行的操作") },3000) } }
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
節(jié)流 throttle
在規(guī)定的時間內(nèi)只觸發(fā)一次回調(diào)函數(shù)，在規(guī)定時間內(nèi)多次觸發(fā)函數(shù)，只會執(zhí)行一次
舉個例子：一個點擊事件，你設(shè)定了節(jié)流的延遲時間為一秒鐘，那么在你一直點擊的情況下，每隔一秒會觸發(fā)一次這個事件，直到你的點擊停止，這個不會累積，比如一秒鐘內(nèi)點擊了五次，然后不再點擊時，事件也只會觸發(fā)一次而不會累積到觸發(fā)五次，這種累積的可以采用定時器實現(xiàn)。
節(jié)流一般多用于監(jiān)聽輸入框和滾動條，同樣的在我們的loadsh中也有寫好的節(jié)流的函數(shù)throttle,使用方法和上面防抖類似，這里就不詳細寫了，主要寫一下 自定義的節(jié)流函數(shù)。
throttle(fun, ms,options) fun:需要節(jié)流的回調(diào)函數(shù)
ms:等待時間
options：額外配置項
自定義節(jié)流函數(shù)：
原理就是用時間戳判斷是否到了回調(diào)的執(zhí)行時間，記錄上次執(zhí)行的時間戳，然后每次觸發(fā) 事件執(zhí)行回調(diào)，回調(diào)里邊判斷當(dāng)前時間戳距離上一次執(zhí)行時間戳的間隔是否已經(jīng)到達規(guī)定的時間，如果是就執(zhí)行，并且會更新上次執(zhí)行的時間戳。
下面是我寫的一個簡單的例子，可以根據(jù)自己需求進行修改
data:{ lastTime:new Date() }, methods:{ throttle(fun){ let now = new Date() console.log("now",now) console.log("lastTime",this.lastTime) if (now - this.lastTime > 1000){ fun() this.lastTime = now } }, test(){ this.throttle(function (){ console.log("節(jié)流函數(shù)調(diào)用，時間1000ms") }) }, }
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
-
25
-
26
-
27
如果項目多次用到可以將以上的方法封裝成一個工具類。
參考文章：https://www.jb51.net/article/161713.htm
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
轉(zhuǎn)自：csdn
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( m.wtxcl.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
