Vue 3組合API去抖function

Question

我正在嘗試使用組合 API 在 Vue 3 中創建可重用的去抖 function 但我正在努力讓它工作。

這是我到目前為止所擁有的：

去抖動.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>

未觸發傳遞給去抖 function 的回調。 我在控制台中沒有看到 output。

Answer 1

您擁有的debounce function 是一個高階function，它生成並返回一個新的 function。 生成的 function 應該用作事件處理程序來實現您想要的去抖動行為。

僅調用debounce一次，並將生成的 debouncer function 設置為事件處理程序：

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

否則，每次觸發時，handler 都會再次調用debounce ，並且每次都生成一個新的 debouncer function，與上一個無關。