jQuery防止重复绑定事件

jQuery一个对象的事件可以重复绑定多次，当事件触发的时候会引起代码多遍执行。

例如：

function reg_button_click(){
  $("#button).click(function(){
    alert("button click");
  });
}
$(document).ready(function(){
  reg_button_click();
  reg_button_click();
  reg_button_click();  //重复注册3次
  $('#button').click();  //触发的时候 出现3个alert
});

然而我们这里其实只需要它出发一次就够了，但是它触发了三次，所以出现了问题，其解决办法如下：

function reg_button_click(){
  $("#button).unbind('click').bind('click',(function(){
    alert("button click");
  });
}
$(document).ready(function(){
  reg_button_click();
  reg_button_click();
  reg_button_click();  //重复注册3次
  $('#button').click();  //触发的时候 出现1个alert
});

这样就解决了出发3次的问题，这里只触发一次，当然如果使用on绑定的时间，就可以使用off来解绑：

$(".oneline_is").off('click').on("click",function(){······});

很多时候事件会被快速重复触发，比如 click，这样就会执行两次代码，造成很多后果。现在有比较多的解决方法，但几乎都有局限性，比如一个 Ajax 表单，如果防止用户一次点好多下可以在第一次点击的时候冻结提交按钮，直到允许再次点击的时候再放开。很多人都这样干，但在其他的情况就不是很有效了。

可以写一个函数：

var _timer = {};
function delay_till_last(id, fn, wait) {
    if (_timer[id]) {
        window.clearTimeout(_timer[id]);
        delete _timer[id];
    }
 
    return _timer[id] = window.setTimeout(function() {
        fn();
        delete _timer[id];
    }, wait);
}

然后如下调用就好了：

$(".delete_right").on('click', function() {
    delay_till_last('popups', function() {//注意 id 是唯一的
        outerview.hide();
        popview.hide();
    }, 300);
});

上面的代码可以让点击之后等待 300 毫秒，如果在 300 毫秒内又发生了这个事件则废除上一次点击，重新计时，反复如此，直到完全等待了 300 毫秒再响应事件。

这个函数很有用的，比如验证输入或者根据输入的邮箱实时拉去头像而不用等到必须失焦再拉取。

其次，如果是button，防止其二次点击，可使用其属性disabled属性来控制：

<input type="button" value="Click" id="subBtn"/>
<script type="text/javascript">
function myFunc(){
    //code
    //执行某段代码后可选择移除disabled属性，让button可以再次被点击
    $("#subBtn").removeAttr("disabled");
}
$("#subBtn").click(function(){
    //让button无法再次点击
    $(this).attr("disabled","disabled");
    //执行其它代码，比如提交事件等
    myFunc();
});
</script>