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

Question

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

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

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

Answer 1

Если «# страница-обновления» действительно кнопка (а 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; 
}); 

Если это не действительно a кнопка, вы можете имитировать свойство 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 обработчики, как правило, хорошая идея в любом случае):

Real кнопка:

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