阻止逻辑事件短时间频繁调用

Question

栗子：
阻止按钮在1s内多次被调用; 先上我baidu的结果

btn.onclick = function add(){
    btn.innerHTML = Number(btn.innerHTML) + 1;    
    btn.onclick = null;
    clearTimeout(timer);
    var timer = setTimeout(function(){
        btn.onclick = add;
    },1000);    
}

btn.onclick = (function(){
    var last = Date.now();
    return function(){
        var now = Date.now();
        if((now - last)>1000){
            btn.innerHTML= Number(btn.innerHTML) + 1;            
        }
        last = now;
    }
})();

以上两种方法都可以实现,目前我困惑的问题在于:
1-除了使用定时器或者闭包,有没有更棒的方式;
2-如果没有,那么上述两种哪种方式更适合组件化公用;

当前项目有许多地方需要用到,那么我想尝试自己封装一个简单的公共方法,达到的效果可以支持click事件阻止1s内被多次调用,又或者可以自定义的扩展(后话);

项目基于angular4.x(没有找到类似推迟执行的方法..),当然原生js完全OK

Answer 1

Observable.fromEvent(btn, "click").debounceTime(1000).map().subscribe();

Answer 2

用RxJS的debounceTime啊，你可以用directive包装一下使用