jQuery click 记得我点击了多少次并触发了多次

Question

我有一个按钮可以切换可见内容——链接或带有输入文本的表单。当我多次快速点击它时出现问题，搜索输入疯狂地闪烁，每次我点击按钮时淡入淡出，我想防止它触发这么多次。

我该怎么做？？

   $("#search-button").on("click", function (e) {
       e.stopPropagation();
       e.stopImmediatePropagation();
       e.preventDefault();

       $("#search-form").fadeToggle(800);

       if (links.css('visibility') === 'hidden')
           links.css('visibility', 'visible');
       else
           links.css('visibility', 'hidden');

   });

Answer 1

您可以停用点击处理程序，直到动画结束，然后重新激活它。

var toggleSearch = function(e) {
  $("#search-button").off("click"); // When the click is received, turn off the click handler

  e.stopPropagation();
  e.stopImmediatePropagation();
  e.preventDefault();
  $("#search-form").fadeToggle(800, function() {
    $("#search-button").on("click", toggleSearch); // When the animation is finished, turn the click handler on again
  });
/*
  if (links.css('visibility') === 'hidden')
    links.css('visibility', 'visible');
  else
    links.css('visibility', 'hidden');
*/
}

$("#search-button").on("click", toggleSearch);

#search-form {
  width: 200px;
  height: 100px;
  background-color: #f90;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="search-button">search-button</button>
<form id="search-form">

</form>

Answer 2

除了深入了解可观察对象或去抖动之外，you can probably steal David Walsh's 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);
    };
};

实施：

var myDebouncer = debounce(function() {

    // Put your original code here

}, 250);

window.addEventListener('resize', myDebouncer);

您现在也可以通过此方法对应用中的任何其他操作进行去抖。

jQuery click 记得我点击了多少次并触发了多次

jQuery click remembers how many times I clicked and firing multiple times

javascript

jquery

onclick

fadeout

fadein