javascript - 终止、中止、停止、取消先前对 javascript 函数的调用/队列

Question

我有一个函数，需要一些时间才能在 click 事件上运行。以下只是一个示例，setTimeout 仅用于模拟运行它所需的时间。如何确保当用户单击某个项目时，之前运行的任何函数都被取消，并且仅触发最新的 onclick 函数？

即如果用户点击它 10 次。我只想执行第 10 次点击，而不是之前的 9 次点击。

我希望有一个纯/普通的 js 解决方案......而不是 jQuery

(function () {

    var nav = document.querySelector('.nav__toggle');
    var toggleState = function (elem, one, two) {
        var elem = document.querySelector(elem);
        elem.setAttribute('data-state', elem.getAttribute('data-state') === one ? two : one);
    };

    nav.onclick = function (e) {
        setTimeout(function(){
        toggleState('.nav ul', 'closed', 'open');
        }, 5000);
        e.preventDefault();
    };

})();

fiddle :http://jsfiddle.net/6p94p48m/

Answer 1

您需要消除点击处理程序的抖动。

var button = document.getElementById("debounced");
var clickHandler = function() {
  alert('click handler');
}

var debounce = function(f, debounceTimeout) {
  var to;

  return function() {
    clearTimeout(to);
    to = setTimeout(f, debounceTimeout);
  }
}

button.addEventListener('click', debounce(clickHandler, 5000));

<button id="debounced" href="#">debounced</button>

或者使用下划线/lodash https://lodash.com/docs#debounce