Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Função de Fade-out de outra maneira

Referente ao curso JavaScript: programando na linguagem da web

por Henrique de Oliveira Paroli
| 148.8k xp | 3 posts

Olá,

Eu resolvi testar os tipos de evento e utilizei o evento "transitionend" para fazer o fade-out e remover a linha com o código abaixo:

var pacientes = document.querySelector("#tabela-pacientes");

pacientes.addEventListener("dblclick", function(event){
    var row = event.target.parentNode;
    //adiciona a classe CSS que faz a transição de fade-out
    row.classList.add("fade-out");
    //remove a linha assim que a transição acaba
    row.addEventListener("transitionend", function(){
      this.remove();
    });
})

minha dúvida é: existe alguma outra maneira de utilizar esse evento de maneira que fique mais otimizado, existe alguma diferença de performance do meu código para o código da aula?

5 respostas
por Leonardo Pacheco
| 291.8k xp | 214 posts
Aprendiz de Tecnologia

Beleza Henrique?

Penso o seguinte: - Quanto menos código melhor. (assim mais rápido processar);

Aqui faço um parênteses. Sou a favor de codificar com comentários para ajudar na manutenção (se for o caso) mas depois removê-los bem como os espaços (minificação).

Mas, a questão do Listener é um ponto que não sei completamente. Então, caso eu entendesse das camadas mais abaixo no JS, poderia dizer uma das duas coisas abaixo:

  • Listeners devem ser usados quando necessários; assim não é necessário processamento aguardando eventos. Isto eu diria se é usado um pouco de processamento 'ouvindo' eventos.

  • Listeners devem ser usados ao máximo para poupar criação de funções. Isto eu diria caso a linguagem ja tem por padrão uma ação sempre que eventos ocorrem. Tipo: buscar uma lista de listeners para ver se existe algum.

Dessa forma digo que não conheço como o JavaScript trabalha nas camadas mais baixas.

Adicionalmente, por não lembrar do código da aula, se for possível criar um exemplo na web e postar ambos, ajuda na comparação.

Abraço

por Henrique de Oliveira Paroli
| 148.8k xp | 3 posts

Oi Leonardo, blz?

Esse é o código da aula:

var tabela = document.querySelector("#tabela-pacientes");

tabela.addEventListener("dblclick", function(event) {
    event.target.parentNode.classList.add("fadeOut");

    setTimeout(function() {
        event.target.parentNode.remove();
    }, 500);

});

Eu utilizei o código com o evento "transitionend", pensando em não depender do tempo da transição, pois caso alguém queira mudar a transição de alguma forma, não precisaria alterar nada no código js.

Como não tenho experiência, não sei se é uma boa prática ou não.

Obrigado pela ajuda!

por Carlos Antonio Silva do Nascimento
| 343.4k xp | 747 posts
Analista de Sistema

Boa Henrique, como o Leonardo falou quanto menos código melhor. Não vejo problema de se usar dessa forma, ficou bacana. Bons estudos!

solução!
por Leonardo Pacheco
| 291.8k xp | 214 posts
Aprendiz de Tecnologia

Certamente que não depender de alterar o tempo em dois lugares é melhor. Creio que o professor não quis foi dificultar, ser mais didático. Isto pois o JQuery tem inclusive parâmetros que podem ser adicionados na própria função do tipo: ao fim dessa função, o que faço? Ai tu pode colocar uma ação ou outra função.

Eu ficaria com sua proposição.

por Henrique de Oliveira Paroli
| 148.8k xp | 3 posts

Obrigado pelo retorno pessoal!