Execute function after async function is done
Question
How to make function extra_stuff to be executed after anim or display_effects functions are done ? Best option would be to hold function extra_stuff until animate is done because i don't want to edit anonymous function passed to on method, it should stay simple and readable.
<html>
<head>
<meta charset="utf-8">
<script src="jquery-2.0.3.min.js"></script>
<style>
.selected {color:pink;}
</style>
</head>
<body>
<ul id="workers">
<li><a href="#">worker#1</a></li>
<li><a href="#">worker#2</a></li>
<li><a href="#">worker#3</a></li>
<li><a href="#">worker#4</a></li>
</ul>
<script>
$(function()
{
function unmark_selected()
{
$('.selected').removeClass('selected');
}
function mark_user(e)
{
e.addClass('selected');
}
function display_effects(e)
{
e.animate({ fontSize: "24px" }, 1500);
}
function extra_stuff()
{
console.log('maybe another animation');
}
$('ul#workers li a').on('click', function()
{
unmark_selected();
mark_user( $(this) );
display_effects( $(this) );
extra_stuff();
});
});
</script>
</body>
</html>
2 answers
solution1
2 ACCPTED 2013-10-04 09:54:29
Make display_effects to return a promise() object, and then call the extra_stuff method in the done callback of the promise
$(function () {
function unmark_selected() {
$('.selected').removeClass('selected');
}
function mark_user(e) {
e.addClass('selected');
}
function display_effects(e) {
return e.animate({
fontSize: "24px"
}, 1500).promise();
}
function extra_stuff() {
console.log('maybe another animation');
}
$('ul#workers li a').on('click', function () {
unmark_selected();
mark_user($(this));
display_effects($(this)).done(extra_stuff);
});
});
solution2
1 2013-10-04 09:55:49
You need a callback:
function display_effects(e, callback) {
e.animate({ fontSize: "24px" }, 1500, callback);
}
$('ul#workers li a').on('click', function() {
unmark_selected();
mark_user( $(this) );
display_effects( $(this), extra_stuff ); // no invocation, pass reference!
});
It will be called in the future, when the fontsize animation is done. Check the docs for the .animate() method . Notice that if you simply want to add another animation after the fontsize, they will be queued automatically.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.