Js防止按钮重复点击的方法？

Question

有哪几种比较好的实现，不想让按钮在短时间重复点击多次

Answer 1

表单元素

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

Answer 2

下面的例子用jquery。
解决思路，设置一个条件来触发事件：

当条件为真时，执行
条件为假时不执行。

那么问题来了，怎么设置条件 ？

可以用setTimeout函数来改变条件的值。

例子

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

Answer 3

基础：添加Loading效果
方案1：使用防抖debounce
方案2：变量控制
详情请看我写的文章：https://segmentfault.com/a/11...