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属性，然后设置超时以恢复它：< / p>

$('#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包装器的引用（{{1} }）。这只是因为jQuery使测试/添加/删除类名变得容易。在这两种情况下，一旦释放事件处理程序中的闭包（在上面，即ajax调用完成后的五秒），就会释放该引用。

你明确表示你希望在 ajax调用完成后禁用，但正如Marcus在下面指出的那样，你可能想在启动 ajax调用时禁用它。只需稍微移动禁用位，并为var $refreshButton = $(this);未被调用的情况添加error处理程序（success处理程序在任何情况下都是个好主意）：< / p>

真实按钮：

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

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

Jquery禁用链接5秒

3 个答案: