Question

看看this JS代码（这里也是一个代码片段）：

//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>

我正在尝试将debouncer添加到委派的点击事件，仅在单击某个项目时。如您所见，我展示了两种去抖代码的方法（上图）。第一个是委托活动。如果委派的所有元素都应该对其进行去抖动，则它可以正常工作。第二种方法是使用未分级的点击，并委派每个函数。

第三种方式是代码停止工作的地方。在这种情况下，委托点击处理程序;但是，只有第二个被授权的元素才能去辩论。我使用$(this).is()来区分这两个元素。现在，如果您单独调用去抖动函数（tku David 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);
});

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

JS - 去除委托事件

1 个答案: