Vue 3组合API去抖函数

Question

我正在尝试使用组合 API 在 Vue 3 中创建一个可重用的去抖函数，但很难让它工作。

这是我到目前为止所拥有的：

去抖.js

const debounce = (fn, delay) => {
  let timeout

  return (...args) => {
    if (timeout) {
      clearTimeout(timeout)
    }

    timeout = setTimeout(() => {
      fn(...args)
    }, delay)
  }
}

export default debounce

基础组件.vue

<template>
  <input type="text" @input="onInput" />
</template>

<script>
import debounce from './debounce'

export default {
  setup() {
    const onInput = () => {
      debounce(() => {
        console.log('debug')
      }, 500)
    }

    return { onInput }
  }
}
</script>

传递给去抖动函数的回调未被触发。我没有在控制台中看到输出。

Answer 1

debounce您拥有的函数是一个高阶函数，它生成并返回一个新函数。该生成的函数应该用作事件处理程序来实现您想要的去抖动行为。

仅调用debounce一次，并将生成的防抖函数设置为用作事件处理程序：

setup() {
  const onInput = debounce(() => {
    console.log('debug')
  }, 500)
  return { onInput }
}

否则，处理程序debounce每​​次触发时都会再次调用，并每次生成一个新的防抖函数，与上一个函数无关。