拿个我最近在做的功能举例:
关注他人的功能:有一个关注按钮,实现关注与取消关注功能。(数据库是mysql)
由于是ajax操作,有个回调方法,在返回success之前或者浏览器卡顿之间会出现重复触发同一个事件。
方法1:
最笨的方法就是在关联表中插入数据前先查询 ,然后判断有没有两人的关联数据。若没有则插入,若有则不插入。此方法,当表单数据量多的时候,操作不仅慢,还会给服务器带来一定压力。
方法2:
setTimeout + clearTimeout
连续的点击会把上一次点击清除掉,也就是ajax请求会在最后一次点击后发出去
方法3:
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>
方法4:
给ajax请求一个"开关",效果等同于方法3。代码如下:
var flag = false //定义一个开关,默认是关
$("#subBtn").click(function(){
if(!flag){
flag = true; //打开开关
//若开关处于开的状态,执行其它代码,比如提交事件等
flag = false; //执行完代码,需要在回调函数的最后将开关关闭
}
});
以上方法2,3比较常用。看到知乎上的大神说,可以自己写封装的ajax,内嵌一些机制,暂时还未理解,等理解了再完善一下。