防抖

customRef

制作文件 src/utils/useDebounceRef.js 代码如下

import { customRef } from 'vue'
const useDebounceRef = (defaultValue,delay = 300) => {
  let time = null
  return customRef((track, trigger) => {
    return {
      get() {
        track()
        return defaultValue
      },
      set(newValue) {
        clearTimeout(time)
        time = setTimeout(() => {
          defaultValue = newValue
          trigger()
        }, 500)
      }
    }
  })
}
export { useDebounceRef }

业务组件中使用，注意该方法只能使用原生的 input，如果使用 el-input 会有问题

<template>
<div class="page-container">
  <input v-model="qrCode">
  {{qrCode}}
</div>
</template>
<script setup>
import { useDebounceRef } from '@/utils/useDebounceRef.js'
const qrCode = useDebounceRef('',300)
</script>
<style scoped>
.page-container {
  width: 100%;
  height: 100%;
}
</style>

el-input

上面使用 vue 提供的自定义响应式 customRef 制作防抖的方法应用在 el-input 会有问题，可以使用下面方法做防抖

<template>
<div class="page-container">
  <el-input v-model="keywords" @input="handleInput"></el-input>
  {{key}}
</div>
</template>
<script setup>

import {ref} from 'vue'

let keywords = ref('')
let key = ref('')

const handleInput = debounce(value =>{
  key.value = value
},500)

function debounce(cb, delay) {
  let timer
  return function(...args) {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      cb.call(this, ...args)
    }, delay)
  }
}
</script>
<style scoped>
.page-container {
  width: 100%;
  height: 100%;
}
</style>