Как вы используете .done или .complete с .toggle в jQuery

Question

Я не могу понять, как правильно использовать .complete или .done после .toggle in jQuery. Я хочу, чтобы текст кнопки изменялся после завершения анимации переключения. Я не уверен, что правильно их связываю. Документация jQuery не содержит примеров того, как их использовать, только потому, что они являются «опциями». Как вы используете эти опции? Разве это не так, как показано ниже?

$(document).on("click", "#new-contact-btn", function(event){
    event.preventDefault();

    $("#new-contact-row").toggle(200).complete(function(){  

      if ( $("#new-contact-row").is(":visible") ) {
        $(this).text("Cancel");
      } else {
        $(this).text("+ Add New Contact");
      }
    });
});

Приведенный выше код не работает, текст кнопки никогда не меняется при нажатии.

Answer 1

toggle() не возвращает обещание или отложенный объект, поэтому вызов complete() для него не будет работать.

Вместо этого вам нужно использовать второй аргумент вызова метода, callback. Если вы предоставите здесь функцию, она будет выполнена после завершения анимации. Также обратите внимание, что в этой функции this будет ссылаться на строку, а не на кнопку, поэтому вам нужно сохранить ссылку на кнопку в переменной. Попробуйте это:

$(document).on('click', '#new-contact-btn', function(e) {
  e.preventDefault();

  $('#new-contact-row').toggle(200, function() {
    $('#new-contact-btn').text($(this).is(":visible") ? "Cancel" : "+ Add New Contact");
  });
});

div { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="new-contact-row">Contact Row</div>
<button id="new-contact-btn">+ Add New Contact</button>