防抖

惊朝發表於2024-04-20

lodash庫提供的debounce函式用於限制傳入函式的呼叫頻率，確保函式在指定的時間間隔內最多隻執行一次。debounce返回的函式本身並不是非同步的，它只是限制了呼叫頻率，但並不改變傳入函式的同步或非同步特性
下面案例包含了輸入框防抖和按鈕防抖

<template>
      <el-button type="success" @click="buttonDebounce">防抖按鈕測試</el-button>

      <el-form :model="textForm">
          <el-form-item label="防抖測試輸入框:" prop="text" :rules="rules">
              <el-input v-model="textForm.text" style="width: 120px;"></el-input>
          </el-form-item>
      </el-form>

</template>

<script>
import { debounce } from 'lodash';

const buttonDebounce = debounce(() => {
    console.log("防抖測試");
}, 900);

const validateText = debounce((rule: any, value: any, callback: any) => {
    if(value.length < 4)    callback(new Error("長度至少為4"))
    else                    callback()
}, 900)

const rules = [
    { required: true, trigger: 'change', validator: validateText }
]

</script>

相關文章