Vue 3 组合 API 去抖功能

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>

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

Answer 1

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

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

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

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

Vue 3 组合 API 去抖功能

Vue 3 composition API debounce function

javascript

vue.js

debounce

vuejs3

vue-composition-api