Jquery禁用链接5秒答案

【问题标题】：Jquery disable link for 5 secondsJquery禁用链接5秒
【发布时间】：2011-06-03 05:29:17
【问题描述】：

我有这个代码：

   $('#page-refresh').click( function() {
        $.ajax({
            url: "/page1.php",
            cache: false,
            dataType: "html",
            success: function(data) {
                $('#pagelist').html(data);
            }
        });
         return false;
   });

在这段代码中，是否有可能在 ajax 成功功能上禁用 #page-refresh 点击 5 秒然后重新启用它？基本上，如果一个人单击按钮并且发生此操作，我不希望他们再次单击并再次运行此操作 5 秒钟。我查看了 delay() 来取消绑定单击，然后再次绑定它，但是一旦取消绑定，它就再也不允许我单击该按钮了。

【问题讨论】：

标签： jquery ajax hyperlink onclick

【解决方案1】：

如果“#page-refresh”确实是一个按钮（button 或input type="button" 元素），您可以使用它的disabled 属性，然后设置超时来恢复它：

$('#page-refresh').click( function() {
    var refreshButton = this;
    $.ajax({
        url: "/page1.php",
        cache: false,
        dataType: "html",
        success: function(data) {
            $('#pagelist').html(data);
            refreshButton.disabled = true;
            setTimeout(function() {
                refreshButton.disabled = false;
            }, 5000);
        }
    });
    return false;
});

如果它不是真的按钮，您可以模拟disabled 属性。我会在这里用一个类来做，这样你就可以通过 CSS 为用户显示禁用状态：

$('#page-refresh').click( function() {
    var $refreshButton = $(this);
    if (!$refreshButton.hasClass('disabled')) {
        $.ajax({
            url: "/page1.php",
            cache: false,
            dataType: "html",
            success: function(data) {
                $('#pagelist').html(data);
                $refreshButton.addClass('disabled');
                setTimeout(function() {
                    $refreshButton.removeClass('disabled');
                }, 5000);
            }
        });
        return false;
    });

请注意，在第一种情况下，我保留了对 DOM 元素的引用 (var refreshButton = this;)，但在第二种情况下，我保留了对围绕它的 jQuery 包装器的引用 (var $refreshButton = $(this);)。那只是因为 jQuery 使测试/添加/删除类名变得容易。在这两种情况下，一旦您的事件处理程序中的闭包被释放（在上面，即 ajax 调用完成后的 5 秒），该引用就会被释放。

您明确表示您想在 ajax 调用完成后禁用它，但正如 Marcus 在下面指出的那样，您可能希望在开始 ajax 调用时禁用它.只需将禁用位向上移动一点，然后为 success 不被调用的情况添加一个 error 处理程序（error 处理程序通常在任何情况下都是一个好主意）：

真正的按钮：

$('#page-refresh').click( function() {
    var refreshButton = this;
    refreshButton.disabled = true;             // <== Moved
    $.ajax({
        url: "/page1.php",
        cache: false,
        dataType: "html",
        success: function(data) {
            $('#pagelist').html(data);
            setTimeout(function() {
                refreshButton.disabled = false;
            }, 5000);
        },
        error: function() {                    // <== Added
            refreshButton.disabled = false;
        }
    });
    return false;
});

通过“禁用”类模拟：

$('#page-refresh').click( function() {
    var $refreshButton = $(this);
    if (!$refreshButton.hasClass('disabled')) {
        $refreshButton.addClass('disabled');   // <== Moved
        $.ajax({
            url: "/page1.php",
            cache: false,
            dataType: "html",
            success: function(data) {
                $('#pagelist').html(data);
                setTimeout(function() {
                    $refreshButton.removeClass('disabled');
                }, 5000);
            },
            error: function() {                // <== Added
                $refreshButton.removeClass('disabled');
            }
        });
        return false;
    });

【讨论】：

也许一个好主意是在 AJAX 调用发出之前禁用按钮（以避免向 AJAX 调用发送垃圾邮件），然后如果成功调用返回使用 clearTimeout 摆脱现有的5 秒超时并从该点创建一个新的以重新启用按钮。 --- 此外，如果使用该方法，我可能还会有一个 error: function () {} 清除超时并重新启用按钮，以避免在 AJAX 调用失败的情况下按钮永远处于禁用状态。
@Marcus：同意。这个问题是关于他们什么时候想做的，但我会添加一个注释。
@TJ 是的，只是加上我的两便士价值。

【解决方案2】：

这样做：

$('#page-refresh').click( function() {
    var btn = $(this);

    // disable button
    btn.attr('disabled', 'disabled');

    $.ajax({
         url: "/page1.php",
         cache: false,
         dataType: "html",
         success: function(data) {
             $('#pagelist').html(data);

             // set timer to re-enable button after 5 seconds (or 5000 milliseconds)
             window.setTimeout(function(){
                 btn.removeAttr('disabled');
             }, 5000);
         }
     });
     return false;
});

【讨论】：

【解决方案3】：

禁用按钮 5 秒的通用解决方案：

$(document).ready(function() 
{
   $(".btn").click(function()
   {            
       var lMilisNow= (new Date()).getTime();
       this.disabled=true; 
       this.setAttribute("data-one-click", lMilisNow); 
        setTimeout("oneClickTimeout()",5100);
    }); 
}

function oneClickTimeout()
{
    $(".btn[data-one-click]").each(function()
    { 
         var lMilisNow= (new Date()).getTime();
         var lMilisAtt= this.getAttribute("data-one-click");
         lMilisAtt= lMilisAtt==null? 0: lMilisAtt;
         if (lMilisNow-lMilisAtt >= 5000 )
         {
             this.disabled=false; 
             this.removeAttribute("data-one-click"); 
         }
     });
}

【讨论】：