Jquery禁用链接5秒

Question

我有这样的代码：

   $('#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()来解除对click的绑定，然后再次绑定它，但是一旦它解除了绑定，它就再也不允许我单击按钮了。

Answer 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;
});

通过“disabled”类模拟：

$('#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;
    });

Answer 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;
});

Answer 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"); 
         }
     });
}