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

问题描述

问 题

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

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

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

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

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

解决方案

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

这样吗？

这篇关于javascript - 如何防止用户短时间内重复操作造成的代码重复执行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！