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

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包装一下使用