九九色综合_性69交片免费看_亚洲一区二区三区久久精品_精品一久久_欧美一级黄视频_污免费网站

Vue的防抖和節(jié)流（接口頻繁調(diào)用如何處理）

2021-9-29 前端達(dá)人

首先描述一下我所使用的業(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ū)別，比如我們寫(xiě)一個(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ù)防抖，也可以自己寫(xiě)一個(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 


    
        1

使用loadsh的debounce方法

<el-button id="myBtn" type="goon" icon="el-icon-search" @click="test">點(diǎn)擊事件</el-button> 


    
        1

let _ = require('lodash'); _.debounce(fun,ms,options) fun: 回調(diào)函數(shù)
ms:等待時(shí)間,毫秒
options:選項(xiàng)對(duì)象 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5

注意：這里點(diǎn)擊事件要寫(xiě)成test： 的形式，test()這樣是不生效的

import debounce from 'lodash/debounce' methods:{ test:debounce(()=>{ console.log("防抖函數(shù)執(zhí)行",) },3000) } //或者下面這種寫(xiě)法 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> 


    
        1

data:{ timer:null }, methods:{ //在最后一次點(diǎn)擊三秒后才會(huì)觸發(fā)一次點(diǎn)擊事件 test(){ clearTimeout(this.timer) //自定義個(gè)定時(shí)器三秒后執(zhí)行，一旦有新的事件發(fā)生會(huì)將這個(gè)定時(shí)器清除重新創(chuàng)建一個(gè)，只有三秒內(nèi)不出現(xiàn)事件這個(gè)定時(shí)器才不會(huì)被銷(xiāo)毀重構(gòu) 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中也有寫(xiě)好的節(jié)流的函數(shù)throttle,使用方法和上面防抖類似，這里就不詳細(xì)寫(xiě)了，主要寫(xiě)一下自定義的節(jié)流函數(shù)。

throttle(fun, ms,options) fun:需要節(jié)流的回調(diào)函數(shù)
ms:等待時(shí)間
options：額外配置項(xiàng) 


    
        1
    

    
        2
    

    
        3
    

    
        4

自定義節(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í)間戳。
下面是我寫(xiě)的一個(gè)簡(jiǎn)單的例子，可以根據(jù)自己需求進(jìn)行修改

data:{ //這里我直接頁(yè)面創(chuàng)建時(shí)定義了一個(gè)初始的變量，保存上一次函數(shù)執(zhí)行的時(shí)間 lastTime:new Date() }, methods:{ //fun 代表要執(zhí)行的函數(shù)，需要被節(jié)流的函數(shù) throttle(fun){ //函數(shù)執(zhí)行時(shí)的時(shí)間 let now = new Date() console.log("now",now) console.log("lastTime",this.lastTime) //兩次調(diào)用的時(shí)間差 if (now - this.lastTime > 1000){ fun() //調(diào)用成功，上一次調(diào)用時(shí)間值修改 this.lastTime = now } }, test(){ this.throttle(function (){ //1000ms內(nèi)無(wú)論點(diǎn)擊多少下，只會(huì)調(diào)用一次 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