Question

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

这是我目前所拥有的：

debounce.js

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

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

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

export default debounce

BaseComponent.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>

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

Answer 1

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

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

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

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

Vue 3 组合 API 去抖动功能

1 个答案: