What is the difference from ON to ONE in Jquery

Navigation
1

I'm dealing with some common optimizations in my system and I found a situation that intrigued me, every time I double clicked on the table and called a function to bring the complementary data of the client it doubled the amount of requests to the php , this happens because I was using the on event, so I did some searching and found the one method, which executes the method only once. this function seems to be new, in versions 1.7 of Jquery it used only live and it worked correctly. So my question is, should I use one if 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);
      }
   });
    
asked by anonymous 08.09.2015 / 15:50

2 answers

1

When you just want it to run once per type, for example: 

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

You will run the code once when you click and once when you move 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." );
});

Now even code using .on() and .off() : 

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

Source = link

    
08.09.2015 / 16:05
4

Following the description and the problem that you have I would say that you need to debounce and not .on() . Debounce is a function that prevents another function from being run, by mistake, too many times or close to each other. I gave you an answer about it , which may be useful here.

To clarify concepts:

.on()

.on() is the method for adding event sink. You receive the event type and a callback function . It will be run as many times as the event is detected / issued.

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

.off()

.off() is the inverse of .on() , that is, it removes the event sink. Note that the callback argument must be the same instance of the function used in .on() . When used without parameters, it removes all darkeners in "brute force" mode.

.one()

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

debounce / flag

If you want you can use debounce 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 interval at which the same function can be called.

Usage: 

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

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

    
08.09.2015 / 16:33
Append methods in a list - Python Simultaneously delete BD image and server destination folder