功能完成时执行代码 [英] Executing code when a function is complete
问题描述
我的代码中有一个函数可以激活几个元素。我想要做的是执行一系列代码，但仅在此函数完成后才执行。
I have a function in my code that animates several elements. What I'm wanting to do is execute a sequence of code but only after this function has completed.
比如说我有这个：
executeMyAnimationFunction();
// Execute this code AFTER executeMyAnimationFunction() has completed
alert('test');
到目前为止，我尝试过使用setTimeout，但这似乎不太可靠。我也试过使用.promise（），但这似乎也没有正确执行：
So far I've tried using setTimeout but this doesn't seem to be very reliable. I've also tried using .promise() but this doesn't seem to execute properly either:
$(executeMyAnimationFunction()).promise().done(function () {
alert('test');
});
但我承认我使用不当。在jquery网站上的演示中，看来promise（）正在被使用的元素上动画。我尝试这样做：
However I admit I be using it incorrectly. In the demo on the jquery site, it seems promise() is being used on the elements that are being animated. I tried doing it like this:
$('#myAnimatedElement').promise().done(function () {
alert('test');
});
并且似乎在某些情况下工作但在其他情况下它没有'工作。我想知道这是否是使用promise（）的可靠方式？
and it seemed to work in certain scenarios but in others it didn't work. I wonder if this is a reliable way of using promise()?
基本上我现在已经陷入了如何做到这一点。我想做的就是等到函数完全执行（函数只是动画一组元素），然后继续执行我的代码。
Basically I'm stuck now with how I can do this. All I want to do is wait until a function has fully executed (the function simply animates a group of elements) and then continue with the execution of my code.
是否有使用我缺少的jquery / javascript这样做的简单方法吗？
Is there a simple way of doing this using jquery/javascript that I'm missing?
谢谢
编辑：到更详细地显示我的问题，这里是我正在使用的确切代码：
To show my problem in a little more detail, here is the exact code I'm using:
<script>
$(function () {
$(window).bind('hashchange', function (e) {
if ($(':animated').length) {
return false;
}
var section = $.param.fragment();
var current = $('#content').children(':visible').attr('id');
$('a').removeClass('active');
// If this is the first load of the page, then animate in the initial content
if (section === '') {
if (current === 'reception') {
animateContentIn("reception");
}
else {
$('a[href="#' + section + '"]').addClass('active');
// Animate out existing content
animateContentOut(current);
setTimeout(function () {
animateContentIn("reception");
}, 1000);
}
}
else {
// Otherwise find the current page content and animate out
animateContentOut(current);
setTimeout(function () {
animateContentIn(section);
}, 1000);
}
})
// Since the event is only triggered when the hash changes, we need to trigger
// the event now, to handle the hash the page may have loaded with.
$(window).trigger('hashchange');
});
function animateContentIn(activePage) {
// Now animate in the new content
switch (activePage) {
case "floorspace":
animateFloorspaceElementsIn();
break;
case "reception":
animateReceptionElementsIn();
break;
}
}
function animateContentOut(currentPage) {
// Now animate in the new content
switch (currentPage) {
case "floorspace":
animateFloorspaceElementsOut();
break;
case "reception":
animateReceptionElementsOut();
break;
}
}
function animateReceptionElementsIn() {
$('#reception').show();
$('#reception .title').animate({
bottom: 520
}, 400);
$('#reception .tile1').animate({
bottom: 504
}, 600);
$('#reception .tile2').animate({
bottom: 504
}, 700);
$('#reception .hero').animate({
bottom: 40
}, 1000);
$('#reception .content1').animate({
bottom: 8
}, 400);
$('#reception .content2').animate({
bottom: 8
}, 500);
}
function animateReceptionElementsOut() {
$('#reception .title').animate({
bottom: -56
}, 400);
$('#reception .tile1').animate({
bottom: -136
}, 600);
$('#reception .tile2').animate({
bottom: -152
}, 700);
$('#reception .hero').animate({
bottom: -464
}, 1000, function () {
$('#reception').hide();
});
$('#reception .content1').animate({
bottom: -112
}, 400);
$('#reception .content2').animate({
bottom: -104
}, 500);
}
function animateFloorspaceElementsIn() {
$('#floorspace').show();
$('#floorspace .title').animate({
bottom: 520
}, 400);
$('#floorspace .tile1').animate({
bottom: 504
}, 600);
$('#floorspace .tile2').animate({
bottom: 504
}, 700);
$('#floorspace .hero').animate({
bottom: 40
}, 1000);
$('#floorspace .content1').animate({
bottom: 8
}, 400);
$('#floorspace .content2').animate({
bottom: 8
}, 500);
}
function animateFloorspaceElementsOut() {
$('#floorspace .title').animate({
bottom: -56
}, 400);
$('#floorspace .tile1').animate({
bottom: -136
}, 600);
$('#floorspace .tile2').animate({
bottom: -152
}, 700);
$('#floorspace .hero').animate({
bottom: -464
}, 1000, function () {
$('#floorspace').hide();
});
$('#floorspace .content1').animate({
bottom: -112
}, 400);
$('#floorspace .content2').animate({
bottom: -104
}, 500);
}
</script>
</head>
<body>
<div id="vert-wrapper">
<div id="wrapper">
<aside id="sidebar">
<nav id="navigation">
<ul>
<li><a href="#">Building</a></li>
<li><a href="#reception">Reception</a></li>
<li><a href="#floorspace">Floor Space</a></li>
<li><a href="#">Views</a></li>
<li><a href="#">Terraces</a></li>
<li><a href="#">Profile</a></li>
</ul>
<ul>
<li><a href="#">Specification</a></li>
<li><a href="#">Plans</a></li>
<li><a href="#">Location</a></li>
<li><a href="#">Ten Storeys</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</aside>
<div id="content">
<article id="reception">
<h1 class="title">
<img src="/images/reception/title.png" alt="Edge" />
</h1>
<img src="/images/reception/1.jpg" alt="" class="tile1" />
<img src="/images/reception/2.jpg" alt="" class="tile2" />
<img src="/images/reception/hero.jpg" alt="" class="hero" />
<img src="/images/reception/content1.jpg" alt="" class="content1" />
<img src="/images/reception/content2.jpg" alt="" class="content2" />
</article>
<article id="floorspace">
<h1 class="title">
<img src="/images/floorspace/title.png" alt="Space" />
</h1>
<img src="/images/floorspace/1.jpg" alt="" class="tile1" />
<img src="/images/floorspace/2.jpg" alt="" class="tile2" />
<img src="/images/floorspace/hero.jpg" alt="" class="hero" />
<img src="/images/floorspace/content1.jpg" alt="" class="content1" />
<img src="/images/floorspace/content2.jpg" alt="" class="content2" />
</article>
</div>
</div>
</div>
</body>
现在我上面的代码确实有效，不过我感觉不是很干净也不是似乎在100％的时间内正确执行。
Now the code I have above does work, however I don't feel it's very clean nor does it seem to execute correctly 100% of the time.
基本上我遇到的困境是我希望能够在 animateContentOut之后执行animateContentIn（） （） 已完成。我设法做到这一点的唯一方法是将animateContentIn（）函数延迟到执行最长动画所需的时间 - 在这种情况下它是1000ms。
Basically the dilemma I have is I want to be able to execute animateContentIn() after animateContentOut() has finished. The only way I've managed to do this is to delay the animateContentIn() function by the time it takes to do the longest animation - in this case it's 1000ms.
是不是有一个更整洁，更有效的方式来写这个？
Isn't there a tidier, more efficient way of writing this??
推荐答案
function someRandomFunction(){
// This will be executed after myFirstFunction
}
function myFirstFunction(callbackFunction){
// Do some stuff
alert(1);
// Do something slow here
// Callback when done:
callbackFunction(some, input);
}
// Usage:
myFirstFunction( someRandomFunction ); // with existing function
myFirstFunction( function(){ alert(1);} ); // anonymous
注意：您可以使用匿名函数
小型演示：< a href =http://jsfiddle.net/zcp82/2/ =nofollow noreferrer> http://jsfiddle.net/zcp82/2/
Note: You can use anonymous functions
Small Demo: http://jsfiddle.net/zcp82/2/
另一个有良好信息的话题：在JavaScript中创建自定义回调
Another topic with good info: Create a custom callback in JavaScript
这篇关于功能完成时执行代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
