vue3 调用防抖函数失败,怎么解决?

写的一个防抖函数:

const debounce = (fn, theTime) => {
  return function () {
    clearTimeout(fn.timer)
    fn.timer = setTimeout(() => {
      fn.call(this, ...arguments)
    }, theTime)
  }
}

下面是 vue3的一个input,用的elementui,定义了一个input事件search

<el-input
      v-model="txt"
      placeholder="请输入网址"
      clearable
      size="large"
      @input="search"
    ></el-input>

我想在search里调用debounce函数,怎么也调不成功:

const search = (e) => {
  debounce(() => {
    console.log('ssssf')
  }, 500)
}

是我调的方法不对吗?

阅读 3.1k
2 个回答

search 方法声明的时候多套了一层,你这么声明每次触发都会声明一个新的防抖方法,所以做不到防抖

const search = debounce(() => {
    console.log('ssssf')
}, 500)

return 了 function 但是没有调用呀。

同时每次都创建一个新函数,也无助于 debounce。它的意思是,触发多次,但只有最后一次会真的被调用。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏