99久久精品国产片-99久久精品国产免费-99久久精品国产麻豆-99久久精品国产国产毛片-99久久精品国产高清一区二区-99久久精品费精品国产一区二区

Vue的防抖和節流（接口頻繁調用如何處理）

2021-9-29 前端達人

首先描述一下我所使用的業務場景：系統有一個批量審批的功能，每個審批的流程需要根據提交的用戶實時的反饋回去進去用戶頁面的刷新，如果一個用戶同時有多個流程被審批通過，前端會向服務端頻繁的多次調用同一個接口，造成服務器壓力過大和頁面卡頓，非常影響用戶體驗。
目標：需要短時間內向服務端頻繁調用接口時只去調用最后一次的接口。（防抖）

防抖和節流的區別：主要體現在執行次數上的區別，比如我們寫一個200ms的延遲時間，節流就是每200ms執行一次，而抖動是只有在最后一次事件的200ms內調用一次回調函數。
防抖和節流都可以用于 mousemove、scroll、resize、input、click等事件，他們的區別在于防抖只會在連續的事件周期結束時執行一次，而節流會在事件周期內按間隔時間有規律的執行多次。

防抖 debounce

當事件被頻繁觸發時，在一定的時間內再去執行回調函數，如果在等待期間再次被觸發，則重新計時，直至整個等待期間沒有新的事件被觸發，執行回調函數。

舉個例子：一個點擊事件，為了防止用戶重復發起請求，如果用戶在三秒內多次發生點擊事件，點擊事件將只執行一次，第一次和第二次點擊的間隔只要在三秒鐘內就會重置這個等待時間，第二次和第三次之間的最大等待時間也是三秒，如果第二次點擊事件發生后的三秒內沒有新的點擊事件產生，第二次點擊后的三秒就會調用回調函數。

可以直接引用loadsh的debounce方法來實現函數防抖，也可以自己寫一個防抖函數（利用定時器）

引用loadsh

這里先給一個中文文檔的地址：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">點擊事件</el-button> 


    
        1

let _ = require('lodash'); _.debounce(fun,ms,options) fun: 回調函數
ms:等待時間,毫秒
options:選項對象 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5

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

import debounce from 'lodash/debounce' methods:{ test:debounce(()=>{ console.log("防抖函數執行",) },3000) } //或者下面這種寫法 document.getElementById("myBtn").addEventListener('click', debounce(function (event) { console.log("防抖函數執行",) }, 3000)) 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14

自定義防抖函數

<el-button type="goon" icon="el-icon-search" @click="test">點擊事件</el-button> 


    
        1

data:{ timer:null }, methods:{ //在最后一次點擊三秒后才會觸發一次點擊事件 test(){ clearTimeout(this.timer) //自定義個定時器三秒后執行，一旦有新的事件發生會將這個定時器清除重新創建一個，只有三秒內不出現事件這個定時器才不會被銷毀重構 this.timer = setTimeout(()=>{ console.log("防抖執行,這里就是你需要執行的操作") },3000) } } 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15

節流 throttle

在規定的時間內只觸發一次回調函數，在規定時間內多次觸發函數，只會執行一次

舉個例子：一個點擊事件，你設定了節流的延遲時間為一秒鐘，那么在你一直點擊的情況下，每隔一秒會觸發一次這個事件，直到你的點擊停止，這個不會累積，比如一秒鐘內點擊了五次，然后不再點擊時，事件也只會觸發一次而不會累積到觸發五次，這種累積的可以采用定時器實現。

節流一般多用于監聽輸入框和滾動條，同樣的在我們的loadsh中也有寫好的節流的函數throttle,使用方法和上面防抖類似，這里就不詳細寫了，主要寫一下自定義的節流函數。

throttle(fun, ms,options) fun:需要節流的回調函數
ms:等待時間
options：額外配置項 


    
        1
    

    
        2
    

    
        3
    

    
        4

自定義節流函數：
原理就是用時間戳判斷是否到了回調的執行時間，記錄上次執行的時間戳，然后每次觸發事件執行回調，回調里邊判斷當前時間戳距離上一次執行時間戳的間隔是否已經到達規定的時間，如果是就執行，并且會更新上次執行的時間戳。
下面是我寫的一個簡單的例子，可以根據自己需求進行修改

data:{ //這里我直接頁面創建時定義了一個初始的變量，保存上一次函數執行的時間 lastTime:new Date() }, methods:{ //fun 代表要執行的函數，需要被節流的函數 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 (){ //1000ms內無論點擊多少下，只會調用一次 console.log("節流函數調用，時間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