How To Wait For A JQuery Toggle To Finish Before Running Another Function?
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>
Post a Comment for "How To Wait For A JQuery Toggle To Finish Before Running Another Function?"