如何防止用户短时间内重复操作造成的代码重复执行

举个例子：
button按钮绑定了一个函数，是5s之后打印数字0；如果我们连续点击button按钮多次，会在控制台输出多个0

期望的输出时，控制台最后只输出一个0，是我们最后点击的那一次

思考：假设在真实的项目中，我们有按钮是绑定了一些交互效果的，比如旋转缩放等，如何防止用户重复操作，代码重复执行导致效果累加？

<button  onclick='test()'>点击</button>

function test(){
   var timer=setTimeout(function(){
      console.log(0);
   }, 5000)
}

---

//禁用按钮
$('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，很多类库中都有实现

---

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

---

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

---

  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);

这样吗？

---

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

---

一般都是作标记位吧。

---

做一个延迟执行就行了。

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

function handler(){
    tout = null;
}