杀死、中止、停止、取消对javascript函数的先前调用/队列
杀死、中止、停止、取消对javascript函数的先前调用/队列
提问于 2015-08-24 23:32:36
我有一个函数，在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();
};
})();小提琴：http://jsfiddle.net/6p94p48m/
回答 1
Stack Overflow用户
发布于 2015-08-25 00:08:59
你需要揭穿你的点击处理程序。
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>
或使用下划线/提交https://lodash.com/docs#debounce
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32193346
复制相关文章
相似问题
腾讯云开发者
