Question

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

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

我希望有一个纯粹的/ vanilla 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();
    };

})();

小提琴：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

杀死，中止，停止，取消之前的呼叫/队列到javascript函数

1 个答案: