Jquery vô hiệu hóa liên kết trong 5 giây

Question

tôi có mã này:

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

Trong mã này là nó có thể là về chức năng thành công ajax nó vô hiệu hóa # trang-refresh nhấp chuột trong 5 giây sau đó kích hoạt lại nó? Về cơ bản nếu một người nhấp vào nút và hành động này xảy ra, tôi không muốn họ nhấp và chạy lại hành động này thêm 5 giây nữa. Tôi nhìn vào sự chậm trễ() để unbind nhấp chuột cho điều này sau đó ràng buộc nó một lần nữa nhưng một khi nó unbinded nó không bao giờ cho phép tôi bấm vào nút nữa.

Answer 1

Nếu "# trang-làm mới" thực sự là một nút (một button hoặc input type="button" phần tử), bạn có thể sử dụng tài sản disabled của nó và sau đó thiết lập một thời gian chờ để khôi phục lại nó:

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

Nếu nó không phải thực sự một nút, bạn có thể mô phỏng thuộc tính disabled. Tôi sẽ làm điều đó với một lớp học ở đây để bạn có thể hiển thị trạng thái khuyết tật cho người sử dụng thông qua 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; 
    }); 

Lưu ý rằng trong trường hợp đầu tiên, tôi đang giữ một tham chiếu đến phần tử DOM (var refreshButton = this;), nhưng trong trường hợp thứ hai, tôi giữ một tham chiếu đến một wrapper jQuery xung quanh nó (var $refreshButton = $(this);). Đó là chỉ vì jQuery giúp dễ dàng kiểm tra/thêm/xóa tên lớp. Trong cả hai trường hợp, tham chiếu đó được phát hành khi các đóng trong trình xử lý sự kiện của bạn được giải phóng (ở trên, đó là năm giây sau khi cuộc gọi ajax hoàn tất).

---

Bạn nói cụ thể bạn muốn vô hiệu hóa nó sau cuộc gọi ajax hoàn tất, nhưng như Marcus chỉ ra dưới đây, có thể bạn muốn vô hiệu hóa nó khi bắt đầu cuộc gọi ajax. Chỉ cần di chuyển chút vô hiệu hóa lên một chút, và thêm một handler error cho trường hợp success không được gọi là (error xử lý thường là một ý tưởng tốt trong mọi trường hợp):

Bất nút:

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

Simulated qua 'disabled' lớp:

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

Chỉ cần làm điều này:

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

Một giải pháp tổng quát để vô hiệu hóa một nút trong 5 giây:

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