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

Question

转：杨锐-->天柱山  

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



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

问题提出：

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

效果图：

1.jpg (3.03 KB, 下载次数: 3)

下载附件

2011-04-20 17:26 上传

问题解决：

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

1. 
   
2. function update(num) {
   
3.             var secs = 60 * 5;
   
4.             if (num == secs) {
   
5.                 $("#btnResendFax").val("发送传真");
   
6.                 $("#btnResendFax").attr("disabled", false);
   
7.             }
   
8.             else {
   
9.                 printnr = secs - num;
   
10.                 $("#btnResendFax").val("发送中，距离下次操作还剩" + printnr + "秒");
    
11.                 $("#btnResendFax").attr("disabled", true);
    
12.             }
    
13.         }

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

for (i = 1; i <= 60 * 5; i++) {                            window.setTimeout("update( " + i + ") ", i * 1000);                        }
显然，这里我们用到了setTimeout函数。

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

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

下面就是实现代码：

1. 
   
2. //页面加载时判断传真发送按钮5分钟倒计时是否已到
   
3.         $(document).ready(function () {
   
4.             var date = new Date();
   
5.             var msNow = date.getTime();
   
6.             var msBefore = getCookie("btnResendFaxTime");
   
7.             if (msBefore != null) {
   
8.                 var msMul = msBefore - msNow;
   
9.                 if (msMul > 0) {
   
10.                     for (var i = 1, j = parseInt(300 - msMul / 1000); j <= 60 * 5; i++, j++) {
    
11.                         window.setTimeout("update( " + j + ") ", i * 1000);
    
12.                     }
    
13.                 }
    
14.             }
    
15.         });
    
16.         //获取cookie
    
17.         function getCookie(name) {
    
18.             var prefix = name + "="
    
19.             var start = document.cookie.indexOf(prefix)
    
20.             if (start == -1) {
    
21.                 return null;
    
22.             }
    
23.             var end = document.cookie.indexOf(";", start + prefix.length)
    
24.             if (end == -1) {
    
25.                 end = document.cookie.length;
    
26.             }
    
27.             var value = document.cookie.substring(start + prefix.length, end)
    
28.             return unescape(value);
    
29.         }
    
30.         //设置cookie
    
31.        function setCookie(){
    
32.             if (!navigator.cookieEnabled) {
    
33.                 alert('不Cookie项!');
    
34.             }
    
35.             else {
    
36.                var date = new Date();
    
37.                 date.setTime(date.getTime() + 60000 * 5);//5分钟过期
    
38.                 document.cookie = 'btnResendFaxTime=' + escape(date.getTime()) + ';expires=' + date.toGMTString() + ';path=/' + ';domaim=null' + ':secure';
    
39.             }
    
40.         }   

复制代码OK，这样就可以了。欢迎大家提出宝贵意见。