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

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

问题提出：

为了防止传真发送接口的堵塞，程序要求传真发送按钮每过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，这样就可以了。欢迎大家提出宝贵意见。