jQuery 阻止用户重复点击案例

本文介绍了一种使用JavaScript实现的计数器按钮功能,通过点击按钮,页面上显示的计数将递增,并且利用setTimeout延迟执行,防止快速连续点击导致的重复计数。此功能适用于需要统计用户操作次数的场景。
<textarea name="" id="" cols="30" rows="10"></textarea><br>
<button id="btn2">Button</button>
<p>您已提交了<span id="ci">0</span>次</p>



<script type="text/javascript">
	var tm=null;                                      //6定义一个变量给setTimeout的值可以返回

	function btnCi(){                                 //4建一个函数
		var cnt=parseInt($("#ci").text());        //1把span的内容变成整型赋给变量cnt
		cnt=cnt+1;                                //2每当点击一下按钮都会加1
		$("#ci").text(cnt);                       //3然后把加后的值返回span
	}
	$(function(){
		$("#btn2").click(function(){
			if ($("ci").attr("dis")==1) {     //7判断span的属性dis是否等于1
				return false;             //8如果等于1的话,就不往下执行了
	}
			$("ci").attr("dis","1");          //9如果等于1的话
			clearTimeout(tm);
			tm=setTimeout("btnCi()",3000);    //5用setTimeout调用函数延迟3秒钟执行
		})
	})
		
</script>

 

转载于:https://my.oschina.net/xiaojunx/blog/840956

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值