点击之后禁用按钮 执行完毕后再启用

交互设计原则: 不该被使用的元素请禁用之

  function test(){
        console.log(0);
    }
    
    function throttle(fun){
        if(fun.timeoutId) {window.clearTimeout(fun.timeoutId);}
        fun.timeoutId = window.setTimeout(function(){
            fun();
           fun.timeoutId = null;
        }, 1000);
    }
    
    throttle(test);
    throttle(test);
    throttle(test);
    throttle(test);

这样吗？

//禁用按钮
$('button').prop('disabled',true);
//回调函数启用按钮
$('button').prop('disabled',false);

如果想要最后一次点击生效，把timer定时器放在函数外每次调用进行检测；
如果不涉及定时器，就在函数内部把函数赋值给自己让每次调用都执行新的逻辑

var timer;
var foo = function() {
    timer && clearTimeout(timer);
    timer = setTimeout(function() {
        console.log(0);
    }, 5000);
    //something
}

看一下js的throttle和debounce，很多类库中都有实现

一般都是作标记位吧。

我们都是设置一个状态值，然后当js开始执行的时候，就将其设置为true，然后等js完成之后，再变成false，然后如果用户中途多次点击按钮触发js，那么就会判断状态值是否为true，如果为true，就阻拦这次的点击事件。

做一个延迟执行就行了。

var tout ;
$('.btn').click(function(){
    if(tout)
        clearTimeout(tout);
    tout = setTimeout(handler,1000);
});

function handler(){
    tout = null;
}