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