关于js中连续click时不执行访问后台请求,当点击停止2s之后,立即发起访问后台的请求的解决方案

防止用户重复向后台发起大量请求,下面我们通过一个例子实现:

当连续点击修改温度的值时,页面上显示的值每次都根据具体情况做出修改,但是将这个值保存的数据库的操作则是在点击操作结束后2s发起的(其中若连续多次点击改变温度的值,则只是在用户最后一次修改完成后2s执行保存到数据库的操作)

点击按钮如图:


处理流程图:


算法分析

*按钮的动作主要负责:1.当没有计时时开启计时2.当已经存在计时是将计时归0,并重新开始计时

*计时器方法的主要负责:保证计时器运行,当计时达到2时,执行访问数据库的业务方法并关闭计时器。

代码实现:

var baseTime=0;
	var timer="";//定时器标识
	function timedCount(flag){
		if(flag=="true"){ //按钮点击事件点击执行的代码块
			baseTime=0;
			clearInterval(timer);//清除原有的计时器
			timer=setTimeout("timedCount('false')",1000);//参数位false表示计时器一直执行
		}else if(flag=="false"){//计时器自己调用的代码块负责一直让baseTime累加
			baseTime=baseTime+1;
			timer=setTimeout("timedCount('false')",1000);
			if(baseTime>3){
				excuChangeTemp(object);//执行业务方法
				clearInterval(timer);
			}
		}
	}

代码实现中参数flag的作用:当是点击事件的方法调用该计时器时,flag=true,当定时器自己递归调用自己的时候,flag=false;



评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

於之

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值