Vue3使用customRef封裝防抖函數(shù)的方法詳解

更新時間：2023年09月04日 09:16:29 作者：丟丟biubiu

防抖函數(shù)的作用是高頻率觸發(fā)的事件,在指定的單位時間內(nèi),只響應最后一次,如果在指定的時間內(nèi)再次觸發(fā),則重新計算時間,本文將給大家詳細的介紹一下Vue3使用customRef封裝防抖函數(shù)的方法,需要的朋友可以參考下

什么是customRef?

創(chuàng)建一個自定義的 ref，并對其依賴項跟蹤和更新觸發(fā)進行顯式控制。它需要一個工廠函數(shù)，該函數(shù)接收 track 和 trigger 函數(shù)作為參數(shù)，并且應該返回一個帶有 get 和 set 的對象。

防抖（多次觸發(fā) 只執(zhí)行最后一次）

作用： 高頻率觸發(fā)的事件,在指定的單位時間內(nèi)，只響應最后一次，如果在指定的時間內(nèi)再次觸發(fā)，則重新計算時間
防抖類似于英雄聯(lián)盟回城6秒，如果回城中被打斷，再次回城需要再等6秒

使用customRef封裝防抖函數(shù)

import { customRef } from "vue";
//設置默認的時間間隔為1000ms
export function debounceRef(value, duration = 1000) {
    //閉包緩存計時器
    let timer;
    return customRef((tarck, trigger) => {
        return {
            get(){
                //收集依賴
                tarck();
                return value;
            },
            set(val){
                //短時間內(nèi)連續(xù)觸發(fā)改變這個val的事件,清除計時器,重新開始記時
                clearTimeout(timer)
                timer=setTimeout(()=>{
                    //派發(fā)更新
                    trigger()
                    value=val
                },duration)
            }
        }
    })
}

可以在頁面中使用，對一個輸入框v-model輸入，然后一個文本標簽顯示它的值

經(jīng)過測試，防抖效果成功實現(xiàn)，只有對輸入停止500ms后才會進行對set函數(shù)的觸發(fā)

<template>
  <div class="container">
    <input v-model="text" placeholder="請輸入內(nèi)容" />
    <p>{{ text }}</p>
  </div>
</template>
<script setup>
import {debounceRef} from './debounce.js'
const text = debounceRef('',500);
</script>

到此這篇關(guān)于Vue3使用customRef封裝防抖函數(shù)的方法詳解的文章就介紹到這了,更多相關(guān)Vue3 customRef封裝防抖函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: