How To Wait For A JQuery Toggle To Finish Before Running Another Function?

I am missing something really obvious but I can't make one of my methods to wait until a jQuery toggle is done. I have the following three methods: const toggleContainer = functio

Solution 1:

.toggle( [duration ] [, complete ] )

The optional second argument is the function to cal once the animation is done, so just call toggle with the desired callback. Promises are the best way to do something like this:

const toggleContainer = () => new Promise(resolve =>
  addAnswerContainer.toggle("slow", resolve)
);

const toggleButtons = () => new Promise(resolve => {
    submitAnswerBtn.toggle("slow");
    cancelAnswerBtn.toggle("slow", resolve);
});

const changeText = function() {
  if( addAnswerContainer.is(":hidden") ) {
    addOwnAnswerBtn.text("Add your own answer" );
  }
  else {
    addOwnAnswerBtn.text("Hide adding answer");
  }
};

Then call .then on the promises to chain asynchronous functions:

const toggleUI = function() {
  toggleContainer()
    .then(toggleButtons)
    .then(changeText);
};

Or if you want toggleContainer and toggleButtons to run at once, and only wait before changeText:

const toggleUI = function() {
  toggleContainer()
  toggleButtons()
    .then(changeText);
};

Solution 2:

I may suggest a simple but smart approach following your if-else statements like so:

const toggleContainer = function() {
  addAnswerContainer.toggle("slow");
  return true;
};

const toggleButtons = function() {
  submitAnswerBtn.toggle("slow");
  cancelAnswerBtn.toggle("slow");
};

const ToggleIfTrue = () => {
  if(addAnswerContainer.is(":hidden") && toggleContainer) { 
    addOwnAnswerBtn.text("Add your own answer" );
  }
  else if (addAnswerContainer.is(!":hidden") && toggleContainer) {
    addOwnAnswerBtn.text("Hide adding answer");
  }
};

So this way the inner if-else statement only runs if the addAnswerContainer is set as hidden and the other way around with the final else if statement

Solution 3:

Can return $.when promise from the toggle function and use promise() of element objects to be resolved in $.when.

call next step in next then() of promise chain

Simplified demo

const toggleComplete = function(){
   console.log('finished animation id #', this.id)
}

const toggleButtons = function (){
  // toggleComplete only needed for this demo
  let p1=$('#1').toggle('slow',toggleComplete).promise()
  let p2=$('#2').toggle('slow',toggleComplete).promise()
 
  return $.when(p1,p2)
}

toggleButtons().then(_=>console.log('all animations done')/* change text here*/)

div{display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="1">
One
</div>

<div id="2">
Two
</div>