vue之input输入框防抖debounce函数的使用方式

<template>
    <div>
        <input class="inputBox" type="text" placeholder="搜索项目名称" v-model="searchValue" @keyup.enter="searchBtn" @input="searchBtn">
    </div>
</template>

<script>
let timers = null;
export default{
 data(){
  return{
    searchValue:''
  }
 }
methods:{
 searchBtn(){
  clearTimeout(timers)
  timers = setTimeout(() => {
   this.getOfferList()//需要防抖的函数
  }, 500);
 },
 }
}
</script>

<template>
    <div>
        <input class="inputBox" type="text" placeholder="搜索项目名称" v-model="searchValue">
    </div>
<template>

<script>
export default{
 data(){
  return{
    searchValue:''
  }
 }
//监听input输入值变化
watch:{
  searchValue:function(){
    this.debouncedGetAnswer();
  }
},
created(){
  this.debouncedGetAnswer = this.debounce(this.getOfferList, 500);
  //this.getOfferList是你查询数据的函数，也就是需要防抖的函数
},
methods:{
//防抖
 debounce(fn, delay = 500){
      let timer = null;
      return function() {
        if (timer) {
          clearTimeout(timer)
        }
        timer = setTimeout(() => {
          fn.apply(this, arguments)
          timer = null
        }, delay)
      }
    }
}
</script>

<template>
    <div>
        <input class="inputBox" type="text" placeholder="搜索项目名称" v-model="searchValue">
    </div>
<template>

<script>
export default{
 data(){
  return{
    searchValue:''
  }
 }
//监听input输入值变化
watch:{
  searchValue:function(){
    this.debouncedGetAnswer();
  }
},
created(){
  this.debouncedGetAnswer = this.debounce(this.getOfferList, 500);
  //this.getOfferList是你查询数据的函数，也就是需要防抖的函数
},
methods:{
//防抖
 debounce(fn, delay = 500){
      let timer = null;
      return function() {
        if (timer) {
          clearTimeout(timer)
        }
        timer = setTimeout(() => {
          fn.apply(this, arguments)
          timer = null
        }, delay)
      }
    }
}
</script>

import { _throttle, _debounce } from '@/utils/throttle'

// 监听搜索框内容的变化，等输入完成才会执行搜索函数=>即防抖
watch: {
    searchValue: _debounce(function() {
      this.page = 1
      this.getJobFairList()
    })
  },
 
 
// 搜索，短时间内连续点击搜索按钮只执行一次搜索函数=>即节流
searchBtn: _throttle(function() {
  if (this.searchValue) {
    this.getJobFairList()
  }
}),