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

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