防抖

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>

posted @ 2024-04-20 16:34  惊朝  阅读(2)  评论(0编辑  收藏  举报