Jquery отключить ссылку в течение 5 секунд

У меня есть этот код:

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

В этом коде возможно, что в функции успеха ajax он отключает нажатие # страницы обновления в течение 5 секунд, а затем повторно активирует его? В принципе, если человек нажимает кнопку и это действие происходит, я не хочу, чтобы они нажимали и снова запускали это действие еще на 5 секунд. Я посмотрел на delay(), чтобы отпереть клик для этого, а затем связал его снова, но после его открепления он больше не позволял мне больше нажимать кнопку.

Ответ 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).

Вы сказали, что хотите отключить его после завершения ajax-вызова, но, как указывает Маркус ниже, вы, вероятно, захотите отключить его при запуске вызова ajax. Просто переместите бит отключения бит и добавьте обработчик error для случая, когда success не получает вызов (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;
    });

Ответ 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"); 
         }
     });
}