Отключение кнопки до тех пор, пока не завершится jquery .load ()

Question

В настоящее время я использую следующий код для кнопок «Читать далее»:

$(document).ready(function() {
  $("a.more-link").attr("href", "");
  $("a.more-link").attr("onclick", "return false;");  

  $('.readmore').each(function(index) {
    var $link = $(this);
    $(".readmore").prependTo('.' + $link.attr("id") + ' > #bottominfo');
  });

  $('.readmore').click(function() {  
    var $link = $(this);
    if ( $link.attr("alt") == "read more" ) {
      $('.' + $link.attr("id") + ' > #maincontent').load($link.attr("title") + ' #mainarticle', function(index) {
            $('.' + $link.attr("id") + ' > #maincontent').hide();  
            $('.' + $link.attr("id") + ' > #maincontent').slideToggle('slow');
          });

      $('.' + $link.attr("id") + ' > #maincontent').attr("class", $link.attr("id"));

      $link.attr('alt','read less');      
    } else {
      $('#'+ $link.attr("id") + ' > .' + $link.attr("id")).hide();
      $link.attr('alt','read more'); 
    }
    return false;
 });
});

Проблема, с которой я столкнулся, заключается в том, что если пользователь дважды щелкает (или более) на кнопке, он вызывает функциюнесколько раз.

Как сделать кнопку недоступной для нажатия, пока не завершится .load ()?

Спасибо!

Answer 1

Самым простым было бы добавить класс загрузки к ссылке.Я также сделал быструю очистку вашего кода.Я не смотрел на то, как это работает, но я уверен, что если вы потратите немного больше времени, вы сможете сделать его намного эффективнееодни и те же селекторы несколько раз.Всегда проверяйте api doc и смотрите, что возвращают вызываемые вами методы.Большинство из них возвращают элемент обратно, поэтому вы можете вызвать следующий метод без $()

Пример: $("div").hide().slideToggle('slow');

Answer 2

Не могли бы вы вместо этого просто запустить функцию на .load?

$(document).load(function() {
  $("a.more-link").attr("href", "");
  $("a.more-link").attr("onclick", "return false;");  

  $('.readmore').each(function(index) {
    var $link = $(this);
    $(".readmore").prependTo('.' + $link.attr("id") + ' > #bottominfo');
  });

  $('.readmore').click(function() {  
    var $link = $(this);
    if ( $link.attr("alt") == "read more" ) {
      $('.' + $link.attr("id") + ' > #maincontent').load($link.attr("title") + ' #mainarticle', function(index) {
            $('.' + $link.attr("id") + ' > #maincontent').hide();  
            $('.' + $link.attr("id") + ' > #maincontent').slideToggle('slow');
          });

      $('.' + $link.attr("id") + ' > #maincontent').attr("class", $link.attr("id"));

      $link.attr('alt','read less');      
    } else {
      $('#'+ $link.attr("id") + ' > .' + $link.attr("id")).hide();
      $link.attr('alt','read more'); 
    }
    return false;
 });
});