console
var CLICK_EVENT_KEY = 'click-bounced';
var BOUNCING_DURATION = 1000;
$.event.special[CLICK_EVENT_KEY] = {
bindType: 'click',
handle(event){
if ($(this).data('clicking')){
return
}else{
$(this).data('clicking', true);
event.handleObj.handler.apply(this, arguments);
var _this = this;
setTimeout(function(){
$(_this).data('clicking', false);
}, BOUNCING_DURATION)
}
}
}
$('button.bounced').on(CLICK_EVENT_KEY, function(){
let num = Number(document.querySelector('.alert').innerHTML);
document.querySelector('.alert').innerHTML = ++ num;
});
$('button.not-bounced').on('click', function(){
let num = Number(document.querySelector('.alert').innerHTML);
document.querySelector('.alert').innerHTML = ++ num;
});
<div class="container">
<button class="bounced">1s防抖按钮</button>
<button class="not-bounced">无防抖按钮</button>
<div class="alert">
1
</div>
</div>
.container{
max-width: 80%;
margin: 0 auto;
}