javascript - JS - Debounce a delegated event -

take @ this js code (here's snippet):

//debounce function davidwalsh: https://davidwalsh.name/javascript-debounce-function  //returns function, that, long continues invoked, not  //be triggered. function called after stops being called  //n milliseconds. if `immediate` passed, trigger function on  //leading edge, instead of trailing.  function debounce(func, wait, immediate) {    var timeout;    return function() {      var context = this,        args = arguments;      var later = function() {        timeout = null;        if (!immediate) func.apply(context, args);      };      var callnow = immediate && !timeout;      cleartimeout(timeout);      timeout = settimeout(later, wait);      if (callnow) func.apply(context, args);    };  };  $(document).on('click', '#foo-one, #bar-one', debounce(function(e) {    $('#counter-one').append('<span>1</span>');  }, 350));  $('#foo-two').click(debounce(function(e) {    $('#counter-two').append('<span>2</span>');  }, 350));  $('#bar-two').click(debounce(function(e) {    $('#counter-two').append('<span>2</span>');  }, 350));  $(document).on('click', '#foo-three, #bar-three', function(e) {    var $this = $(this);    if ($this.is('#foo-three')) {      //should happen      $('#counter-three').append('<span>3</span>');    }    if ($this.is('#bar-three')) {      //should debounce      debounce(function() {        $('#counter-three').append('<span>3</span>');      }, 350);    }  });

div > div {    height: 64px;    width: 64px;    border: 1px solid black;    display: inline-block;  }  #counter-one,  #counter-two,  #counter-three {    background-color: red;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>  <div>    <div id="foo-one">foo1</div>    <div id="bar-one">bar1</div>    <div id="counter-one"><span>counter1</span>    </div>  </div>  <div>    <div id="foo-two">foo2</div>    <div id="bar-two">bar2</div>    <div id="counter-two"><span>counter2</span>    </div>  </div>  <div>    <div id="foo-three">foo3</div>    <div id="bar-three">bar3</div>    <div id="counter-three"><span>counter3</span>    </div>  </div>

i trying add debouncer delegated click event, when item clicked. can see, show 2 ways of debouncing code (above). first on delegated event. works if of them elements being delegated should have clicks debounced. second way using undelegated clicks, , each function delegated.

the third way code stops working. in instance, click handler delegated; however, second element delegated should debounce. use $(this).is() tell difference between 2 elements. now, if call debouncer function (tku david walsh) itself, not work...

i need event delegated needs updated/refreshed , per jquery's docs (also, this question):

delegated events have advantage can process events descendant elements added document @ later time. picking element guaranteed present @ time delegated event handler attached, can use delegated events avoid need attach , remove event handlers.

does know how can accomplish debouncing effect on 1 of 2 elements in delegated event, while leaving other 1 not debounce when triggered?

debounce() returns function have call multiple times, , calls debounced. each function created debounce() call separately. see can explain "debounce" function in javascript or what _.debounce do?.

so have create multiple functions via multiple debounce() calls, 1 per element, , call them separately.

var functions = {   "foo-three": function() {     //should happen     $('#counter-three').append('<span>3</span>');   },   "bar-three": debounce(function() {     $('#counter-three').append('<span>3</span>');   }, 350) }; $(document).on('click', '#foo-three, #bar-three', function(e) {   functions[this.id].call(this, e); }); 

delegating events doesn't buy in scenario.