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

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

问题提出：

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