Limitando execução de função com takeUntil

Javascript

Geralmente durante o uso de softwares muitas funções devem/são executadas, indo um pouco mais além, dificilmente você irá ver um sistema (seja web ou desktop) que não possua pelo menos uma função.

Imagine que estamos trabalhando em um sistema na web (webapp), nosso sistema é para cadastro de pacientes, uma das nossas funcionaldiades é realizar a importação de dados de uma fonte externa (outro sistema), sabendo disso, nosso cliente pediu que a função de exportação só pudesse ser executada uma vez. Caso a mesma foi executada, ela não pode mais ser disparada, como podemos criar essa nova funcionalidade e resolver o problema do nosso cliente?

Como implementar nova funcionalidade para o cliente?

Conhecendo a takeUntil

Para esse problema podemos implementar nossa própria takeUntil, ela será uma função responsável por executar determinada função até uma certa quantidade de vezes (definida via parâmetro). Podemos começar criando nossa takeUntil:

const takeUntil = (times, fn) => {
    // implementação...
}

Nossa função recebe dois parâmetros (até o momento para nossa necessidade), sendo eles:

  1. times: Quantidade de vezes que uma determinada função poderá ser executada.
  2. fn: A função que será executada até uma determinada quantidade de vezes.

Repare que um parâmetro depende do outro.

Agora, como podemos implementar o corpo de nossa função?

Implementando a takeUntil

O primeiro passo será retornar uma nova função (com sua execução limitada):

const takeUntil = (times, fn) => {
    return () => {}
}

Agora já podemos criar nossa função de forma limitada:

const importarDados = () => console.log('Importando os dados...')

const fn = takeUntil(1, importarDados)

Repare que criamos uma função chamada importarDados que apenas irá logar uma mensagem simulando a importação de dados. Depois, fizemos o uso da nossa função takeUntil para criarmos uma nova função, agora com sua execução limitada em apenas uma única vez (pois passamos o primeiro parâmetro como 1).

Porém, se tentarmos executar nossa nova função:

fn()

Nada irá acontecer, porque? Isso acontece porque nossa função takeUntil ainda não foi implementada, está apenas retornando uma função que nada faz.

Chega de mais delongas e vamos ao que interessa e implementar a função takeUntil, ela deverá funcionar da seguinte maneira:

  1. Verificar se a quantidade de execução não foi atingida.
  2. Caso ainda não foi atingida, execute ela.
  3. E por último, diminua o número de vezes que ainda podemos executá-la.

Agora que já sabemos como ela irá funcionar, podemos começar sua implementação.

Verificar se a quantidade de execução não foi atingida

Para realizar a verificação se ainda podemos ou não executar a função, podemos simplesmente verificar se nosso parâmetro times ainda é maior do que zero:

const takeUntil = (times, fn) => {
    return () => {
        if (times > 0) {
            // pode executar...
        }
    }
}

Legal, a verificação foi feita de forma simplista através de um simples if.

Caso ainda não foi atingida, execute ela

Com o passo anterior feito, garantimos que nossa função apenas irá executar quando ainda puder, apenas trocamos o comentário anterior pela chamada da função:

const takeUntil = (times, fn) => {
    return () => {
        if (times > 0) {
            fn()
        }
    }
}

Pronto, nossa função apenas irá ser executada onde nossa condição é verdadeira, ou seja, a quantidade (times) de vezes ainda é maior do que zero.

E por último, diminua o número de vezes que ainda podemos executá-la

Por fim, com tudo pronto, precisamos apenas diminuir a quantidade de vezes que ainda podemos executar nossa função:

const takeUntil = (times, fn) => {
    return () => {
        if (times > 0) {
            fn()
        }
        times--
    }
}

Maravilha, tudo deve estar funcionando, vamos testar?

fn()
fn()
fn()
fn()
fn()

Aqui pedimos para nossa função ser executada cinco vezes, mas, só iremos ver a mensagem no console uma única vez.

Comemorando implementação da função

Mas, ainda não podemos comemorar, vamos dar uma olhada no código final (até então) da função takeUntil.

const takeUntil = (times, fn) => {
    return () => {
        if (times > 0) {
            fn()
        }
        times--
    }
}

Está muito verboso, será que não podemos melhorá-lo? Sim, podemos deixá-lo bem menor e mais simples:

const takeUntil = (times, fn) => () => times-- > 0 && fn()

Feito, em apenas uma linha realizamos todos os passos anteriormente destacados.

Caso queira ver o código em funcionamento:

Conclusão

Realizamos a criação/implementação da função takeUntil, com ela conseguimos limitar a execução de uma determinada função até uma certa quantidade de vezes.

Uma biblioteca muito famosa que faz uso dessa função é a RxJS (claro que com uma implementação diferente).

E aí, você já conhecia a função takeUntil? Não deixe de comentar. Se você gostou desse post fique á vontade para assinar a newsletter mais abaixo e receba novidades por email.

Até a próxima.

Matheus Castiglioni

Matheus Castiglioni

Apaixonado pelo mundo dos códigos e um eterno estudante, gosto de aprender e saber um pouco de tudo, aquela curiosidade de saber como tudo funciona, tento compartilhar o máximo de conhecimentos adquiridos e ajudar todos aqueles que sou capaz.

Post's Relacionados

Visualize outros post's relacionados ao mesmo assunto:

Code splitting e lazy loading no React

Javascript
Geralmente durante o uso de softwares muitas funções devem/são executadas, indo um pouco mais além, dificilmente você irá ver um sistema (seja web ou desktop) que não possua pelo menos uma função. Imagine que estamos trabalhando em um sistema na ...
Continuar lendo

Otimizando componentes do React com PureComponent

Javascript
Geralmente durante o uso de softwares muitas funções devem/são executadas, indo um pouco mais além, dificilmente você irá ver um sistema (seja web ou desktop) que não possua pelo menos uma função. Imagine que estamos trabalhando em um sistema na ...
Continuar lendo

Programação Imperativa x Declarativa

Javascript
Geralmente durante o uso de softwares muitas funções devem/são executadas, indo um pouco mais além, dificilmente você irá ver um sistema (seja web ou desktop) que não possua pelo menos uma função. Imagine que estamos trabalhando em um sistema na ...
Continuar lendo

Criando componente com Shadow DOM

Javascript
Geralmente durante o uso de softwares muitas funções devem/são executadas, indo um pouco mais além, dificilmente você irá ver um sistema (seja web ou desktop) que não possua pelo menos uma função. Imagine que estamos trabalhando em um sistema na ...
Continuar lendo

Trabalhando com eventos no JavaScript

Javascript
Geralmente durante o uso de softwares muitas funções devem/são executadas, indo um pouco mais além, dificilmente você irá ver um sistema (seja web ou desktop) que não possua pelo menos uma função. Imagine que estamos trabalhando em um sistema na ...
Continuar lendo