Функция устранения дребезга API композиции Vue 3

Я пытаюсь создать многоразовую функцию отладки в Vue 3, используя API композиции, но мне не удается заставить ее работать.

Вот что у меня есть на данный момент:

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>

Обратный вызов, переданный в функцию противодействия, не запускается. Я не вижу вывода в консоли.


javascript vue.js vuejs3 vue-composition-api debounce
person imot3k    schedule 23.02.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

У вас есть debounce функция - это функция более высокого порядка, которая генерирует и возвращает новую функцию. . Эта сгенерированная функция - это та функция, которую следует использовать в качестве обработчика событий для реализации желаемого поведения устранения неполадок.

Вызовите debounce только один раз и установите эту сгенерированную функцию противодействия, которая будет использоваться в качестве обработчика событий:

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

В противном случае обработчик вызывает debounce снова каждый раз, когда он запускается, и каждый раз генерирует новую функцию устранения неполадок, не имеющую отношения к предыдущей.

person Dan    schedule 23.02.2021