JS - 解除委托事件

Question

看看thisJS代码（这里也是sn-p）：

//debounce function by davidwalsh: https://davidwalsh.name/javascript-debounce-function
//Returns a function, that, as long as it continues to be invoked, will not
//be triggered. The function will be called after it stops being called for
//N milliseconds. If `immediate` is passed, trigger the function on the
//leading edge, instead of the 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 immediately
    $('#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>

我正在尝试将去抖动器添加到委托的单击事件中，仅当单击某个项目时。如您所见，我展示了两种去抖动代码的方法（上图）。第一个是委托事件。如果所有被委派的元素都应该使他们的点击去抖动，那么它就可以工作。第二种方式是使用未委托的点击，每个功能都是委托的。

第三种方式是代码停止工作的地方。在这种情况下，点击处理程序是委托的；但是，只有委托的第二个元素应该去抖动。我使用$(this).is() 来区分这两个元素。现在，如果你自己调用 debouncer 函数（tkuDavid Walsh），它就不起作用了……

我需要委派该事件，因为它需要更新/刷新，并且根据 jQuery 的docs（还有this 问题）：

委托事件的优点是它们可以处理来自以后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要。

有谁知道我如何在委托事件中对两个元素之一实现去抖动效果，同时让另一个元素在触发时不去抖动？

Answer 1

debounce() 返回一个你必须多次调用的函数，这些调用将被去抖动。 debounce() 调用创建的每个函数都单独执行此操作。另见Can someone explain the "debounce" function in Javascript 或What does _.debounce do?。

因此，您必须通过多个 debounce() 调用创建多个函数，每个元素一个，并分别调用它们。

var functions = {
  "foo-three": function() {
    //should happen immediately
    $('#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);
});

在这种情况下，委派活动不会给你带来太多好处。