Evitar facturas duplicadas

Throttle es un patrón de diseño usado para limitar la ejecución de funciones, generalmente son utilizados para restringir la cantidad de veces que un evento que se dispara al hacer click, scroll, resize u otros. Los patrones no son exclusivos de Javascript, se los pueden ocupar en diferentes entornos y lenguajes en el caso lo ocuparemos para evitar la duplicidad de facturas ya que es habitual tener este tipo de controles en proyectos frontend se darán algunos ejemplos en las librerías o frameworks más utilizados (desarrollar su propio método en caso el lenguaje lo requiera).

Vue.js

Instalar la siguiente dependencia para hacer el uso de este patron Vue use Throttle.

shell

npm i @vueuse/core

Implementación

import { useThrottleFn } from '@vueuse/core'

const sendInvoice = () => {
    // logica de envio de factura
}

// Al momento de dar click ejecutar la siguientes función la cual evita que
// al hacer repetidos clicks solo envia un request en un tiempo de 750ms
// para mas detalle revisar la documentación
const handleSendInvoice = useThrottleFn(async () => {
    await sendInvoice();
}, 750)

React.js

Instalar la siguiente dependencia para hacer el uso de este patron React use Throttle.

shell

npm i react-use

Implementación

import { useThrottleFn } from 'react-use';

const sendInvoice = () => {
    // logica de envio de factura
}

// Al momento de dar click ejecutar la siguientes función la cual evita que
// al hacer repetidos clicks solo envia un request en un tiempo de 750ms
// para mas detalle revisar la documentación
const throttledValue = useThrottleFn(async () => {
    await sendInvoice();
},750);

JavaScript

Para JavaScript nativo se recomienda crear una funcioón nativa para poder hacer la implementación del patron

const throttleFn = (callback, time) => {
  if (throttlePause) return;

  throttlePause = true;
  setTimeout(() => {
    callback();
    throttlePause = false;
  }, time);
};

const handleSendInvoice = throttleFn(sendInvoice, 1000)

NOTA

En caso de contar con otro tipo de frontend implementar el método acorde al mismo para evitar la duplicidad de facturas.