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()来取消绑定点击，然后再次绑定它，但是一旦取消绑定，它就再也不允许我点击按钮了。

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

---

您明确表示您希望在 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;
    });

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