博客园  :: 首页  :: 新随笔  :: 订阅 订阅  :: 管理

js设置按钮一段时间内不能重复点击的实现

Posted on 2011-04-20 14:37  sigo-yr  阅读(14666)  评论(5编辑  收藏  举报

下面是我在工作中遇到的一个问题,也成功的解决了,贴出来分享下,希望大家提出宝贵的建议。

问题提出:

为了防止传真发送接口的堵塞,程序要求传真发送按钮每过5分钟才能点击一次。即使关闭当前页面甚至浏览器,再重新打开,仍然能够判断,并做出读秒倒计时提示

效果图:

问题解决:

首先,我们写个按钮状态更新的js函数

function update(num) {
var secs = 60 * 5;
if (num == secs) {
$(
"#btnResendFax").val("发送传真");
$(
"#btnResendFax").attr("disabled", false);
}
else {
printnr
= secs - num;
$(
"#btnResendFax").val("发送中,距离下次操作还剩" + printnr + "");
$(
"#btnResendFax").attr("disabled", true);
}
}

然后,我们再每次单击按钮时执行这样一段js代码

for (i = 1; i <= 60 * 5; i++) {
window.setTimeout(
"update( " + i + ") ", i * 1000);
}

显然,这里我们用到了setTimeout函数。

OK,其实到了这里,已经实现了灰掉按钮并倒计时读秒效果。

但是,当关闭当前页面或浏览器重新打开时,失效了。因此,下面需要对操作按钮的时间设置一个cookie,然后每当打开这个页面时取出这个值,并与当前时间比较,做出相应。

下面就是实现代码:

//页面加载时判断传真发送按钮5分钟倒计时是否已到
$(document).ready(function () {
var date = new Date();
var msNow = date.getTime();
var msBefore = getCookie("btnResendFaxTime");
if (msBefore != null) {
var msMul = msBefore - msNow;
if (msMul > 0) {
for (var i = 1, j = parseInt(300 - msMul / 1000); j <= 60 * 5; i++, j++) {
window.setTimeout(
"update( " + j + ") ", i * 1000);
}
}
}
});
//获取cookie
function getCookie(name) {
var prefix = name + "="
var start = document.cookie.indexOf(prefix)
if (start == -1) {
return null;
}
var end = document.cookie.indexOf(";", start + prefix.length)
if (end == -1) {
end
= document.cookie.length;
}
var value = document.cookie.substring(start + prefix.length, end)
return unescape(value);
}
//设置cookie
function setCookie(){
if (!navigator.cookieEnabled) {
alert(
'不Cookie项!');
}
else {
var date = new Date();
date.setTime(date.getTime()
+ 60000 * 5);//5分钟过期
document.cookie = 'btnResendFaxTime=' + escape(date.getTime()) +
'
;expires=' + date.toGMTString() + ';path=/' + ';domaim=null' + ':secure';
}
}
OK,这样就可以了。欢迎大家提出宝贵意见。
流量统计