4

Estou lidando com algumas otimizações corriqueiras no meu sistema e encontrei uma situação que me intrigou,toda vez que eu fazia um clique duplo na tabela e chamava uma função para trazer os dados complementares do cliente o mesmo duplicava a quantidade de solicitações ao php, isto acontece porque eu estava a usar o evento on, então eu realizei algumas pesquisar e descobri o método one, que executa o método apenas uma vez. esta função parece ser nova, nas versões 1.7 do Jquery utilizava apenas o live e funcionava corretamente. Então minha dúvida e a seguinte, devo usar one se minha intenção e chamar uma função apenas uma vez ou devo usar on e off ?


   $('#clientes tbody').on('dblclick', 'tr', function () {
      $('#cobradores tbody tr').removeClass('btn-success');
      $(this).addClass('btn-success');
      codigo = $(this).closest('tr').attr('id');
      acao = 'update';
      $("#clientes").modal('show');
   });

   $('#clientesModal').on('show.bs.modal', function () {
      if (acao === 'update') {
         dados = {PREUPDATE: true, CODIGO: codigo};
         buscaCobradores(dados);
      }
   });


1
  • 2
    A letra E :) Não conheço jQuery mas acredito que o novo método foi criado justamente para evitar a situação que descreveu.
    – Maniero
    Commented 8/09/2015 às 14:01

2 Respostas 2

5

Seguindo a descrição e o problema que tens eu diria que precisas de fazer debounce e não de .on(). Debounce é uma função que evita que uma outra função seja corrida, por engano, vezes demais ou próximas uma da outra. Dei uma resposta sobre isso que pode ser util aqui.

Para esclarecer conceitos:

.on()

O .on() é o método para adicionar oscultador de eventos. Recebe o tipo de evento e uma função callback. Ela será corrido quantas vezes o evento fôr detetado/emitido.

O .live() é basicamente o mesmo que o .on().

.off()

O .off() é o inverso do .on(), ou seja remove o oscultador de eventos. Nota que o argumento callback deve ser a mesma instância da função usada no .on(). Quando usado sem parâmetros remove todos os oscultadores em modo "força bruta".

.one()

O .one() é o mesmo que o on() mas só corre uma vez, e nunca mais!

debounce / flag

Se quiseres podes usar debounce para evitar que uma callback seja chamada vezes demais. Nesse caso podes usar:

function debounce(fn, delay) {
  var timer = null;
  return function () {
    var context = this, args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };
}

e defenir qual o intervalo minimo em que a mesma função pode ser chamada.

Utilização:

var dbFn = debounce(minhaFuncaoOriginal, 200);
$('#id').on('click', dbFn);

Pode ser contudo que o melhor seja usar uma flag. Nesse caso tens uma variável que impede um pedido ajax de ser corrido enquanto o outro não tiver sido recebido, e assim evitar conteúdo duplo. Nesse caso dá uma olhada a esta resposta. (Vou juntar aqui um exemplo mais logo)

2
  • fiz o teste usando o debounce,flag e funcionaram perfeitamente fiz também assim : ` $('#clientes tbody').off(); ` e funcionou, pelos meus testes usar one não irá funcionar a adição e remoção de classes para dar aquele efeito de hover por acionar a ação apenas uma vez. Commented 8/09/2015 às 18:30
  • 1
    @GabrielRodrigues ótimo que funcionou. Tu saberás qual a maneira que mais te convém. Se houver alguma coisa que não esteja clara diz.
    – Sergio
    Commented 8/09/2015 às 18:31
3

Para quando você só quer que execute uma vez por tipo, exemplo:

$(".target").one("click mouseenter", function() {
  $(".count").html(++n);
});

Vai executar o código uma vez quando clicar e uma vez quando passar o mouse.

É mais adequado usar .one(), porem com .on() e .off() da para ter o mesmo resultado, exemplo com .one():

$( "#foo" ).one( "click", function() {
  alert( "This will be displayed only once." );
});

Agora mesmo código usando .on() e .off():

$( "#foo" ).on( "click", function( event ) {
  alert( "This will be displayed only once." );
  $( this ).off( event );
});

Fonte = http://api.jquery.com/one/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .