js防止重复点击

Posted 2020-11-19 枫叶布

表单元素

disabled 没有之一。

el.prop(‘disabled‘, true);
ajax({}).done(function() { el.prop(‘disabled‘, false); });

非表单元素

非表单，自然没有 disabled 之说，但可以借助中间变量。

if (el.data().loading === true) return false;
el.data(‘loading‘, true);
ajax({}).done(function() { el.data(‘loading‘, false); });

配合CSS

最后再配合css就更完美了。

.disabled, button[disabled] { background-color:#ddd; }

下面的例子用jquery。

解决思路，设置一个条件来触发事件：
那么问题来了，怎么设置条件 ？
可以用setTimeout函数来改变条件的值。

function runa(){
          console.log(‘is run‘);
      }
      var isRun=true;
     $("#set").click(function(){
         if(isRun){
             runa();
             isRun=false;
         }
         setTimeout(function(){
             isRun=true;
         },1500) //点击后相隔多长时间可执行
     })