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

Question

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

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

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

<button  onclick='test()'>点击</button>function test(){   var timer=setTimeout(function(){
      console.log(0);
   }, 5000)
}

Answer 1

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