javascript - 点击数值累加

Question

点击计数时，用户有可能点击过快，数值飞速增加。
如果去把数值的增加控制在1秒内只能增1个值，点击多的不算。

计数：<span id="countspan"></span>
<a href="#" onclick="countNumber();">点击</a>
<script type="text/javascript">
var num = 0;
document.getElementById('countspan').innerHTML = num;
function countNumber(){
    num++;
    document.getElementById('countspan').innerHTML = num;
}

Answer 1

使用setTimeout，比如这样写：

<script>
    var num = 0;
    document.getElementById('countspan').innerHTML = num;
    
    var timer;
    function countNumber(){
        if(!timer){
            timer = setTimeout(function(){
                timer = null;
            },1000);
            
            num++;
            document.getElementById('countspan').innerHTML = num;                
        }
    }
</script>

Answer 2

这种操作类型叫节流阀，我写个简单的例子吧:

var throttle = function(func, wait) {
    var createThrottle = function(f, t) {
        var last, timer;
        return function() {
            var args = Array.prototype.slice.call(arguments);
            var _this = this,
                now = new Date().getTime();
            if (typeof last === 'undefined') {
                last = now;
                return func.apply(_this, args);
            }
            if (now - last > wait) {
                func.apply(_this, args);
                last = new Date().getTime();
            }else {
                clearTimeout(timer);
                timer = setTimeout(function() {
                    func.apply(_this, args);
                    last = new Date().getTime();
                }, wait - now + last);
            }
        };
    };

    return createThrottle(func, wait);
};


var num = 0;
document.getElementById('countspan').innerHTML = num;
function countNumber(){
    num++;
    document.getElementById('countspan').innerHTML = num;
}

var throttled = throttle(countNumber, 1000);

完整的demo，到plunker去看