What’s the difference from ON to ONE in Jquery

Question

I’m dealing with some current optimizations on my system and I found a situation that intrigued me,every time I double-clicked the table and called a function to bring the client’s complementary data the same doubled the amount of requests to php, This is because I was using the event on, then I performed some research and discovered the method one, running the method only once. this function appears to be new in versions 1.7 of Jquery used only the live and it worked properly. So my doubt and the next, I must use one whether my intention is to call a function only once or should I use on and 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);
      }
   });

Answer 1

Following your description and the problem you have I’d say you need to make a mockery and not .on(). Debauchery is a function that prevents another function from being run, by mistake, too often or close to each other. I gave an answer on that that may be useful here.

To clarify concepts:

.on()

The .on() is the method to add event receiver. Receives the event type and a callback function. It will run as many times as the event is detected/broadcast.

The .live() is basically the same as the .on().

.off()

The .off() is the reverse of .on(), that is to remove the event receiver. Note that the callback argument must be the same instance as the function used in the .on(). When used without parameters removes all headphones in "brute force mode".

.one()

The .one() is the same as the on() but only run once, and never again!

debauch / flag

If you want you can use debauchery to prevent a callback from being called too many times. In this case you can use:

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

and define the minimum range within which the same function can be called.

Utilizing:

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

It may be best to use a flag, however. In this case you have a variable that prevents an ajax request from being run while the other has not been received, thus avoiding double content. In that case take a look at this answer. (I’ll add an example later)

Answer 2

For when you only want to run once per type, example:

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

Will run the code once when clicking and once when hovering the mouse.

It is more appropriate to use .one(), but with .on() and .off() to have the same result, example with .one():

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

Right now using code .on() and .off():

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

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