Vue 3 组合 API 去抖动功能答案

【问题标题】：Vue 3 composition API debounce functionVue 3 组合 API 去抖动功能
【发布时间】：2021-05-25 21:26:33
【问题描述】：

我正在尝试使用组合 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 函数的回调未被触发。我没有在控制台中看到输出。

【问题讨论】：

标签： javascript vue.js vuejs3 debounce vue-composition-api

【解决方案1】：

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

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

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

否则，handler每次触发都会再次调用debounce，每次都会生成一个新的debouncer函数，与上一个无关。

【讨论】：