在函数完成时执行代码

Executing code when a function is complete

本文关键字：代码 执行 完成时 函数      更新时间：2023-09-26

我的代码中有一个函数，可以对多个元素进行动画处理。我想做的是执行一系列代码，但只有在这个函数完成后。

例如，假设我有这个：

executeMyAnimationFunction();
// Execute this code AFTER executeMyAnimationFunction() has completed
alert('test');

到目前为止，我已经尝试使用 setTimeout，但这似乎不是很可靠。我也尝试使用 .promise（），但这似乎也没有正确执行：

$(executeMyAnimationFunction()).promise().done(function () {
    alert('test');
});

但是我承认我用错了它。在jquery站点的演示中，似乎promise（）正在用于正在动画的元素。我尝试这样做：

$('#myAnimatedElement').promise().done(function () {
    alert('test');
});

它似乎在某些情况下有效，但在其他情况下不起作用。我想知道这是否是使用 promise（） 的可靠方法？

基本上我现在被困在如何做到这一点上。我想做的只是等到一个函数完全执行（该函数只是对一组元素进行动画处理），然后继续执行我的代码。

有没有一种简单的方法可以使用我缺少的jquery/javascript来做到这一点？

谢谢

编辑：为了更详细地显示我的问题，这是我正在使用的确切代码：

<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% 正确执行。

基本上，我遇到的困境是我希望能够在animateContentOut（）完成后执行animateContentIn（）。 我设法做到这一点的唯一方法是将 animateContentIn（） 函数延迟执行最长动画所需的时间 - 在本例中为 1000 毫秒。

难道没有一种更整洁、更有效的写法吗？

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

注意：您可以使用匿名函数
小演示：http://jsfiddle.net/zcp82/2/

另一个包含良好信息的主题：在 JavaScript 中创建自定义回调

使用回调？

function executeMyAnimationFunction(complete){
    $('div').animate({ height: '1px' }, 500, complete);
}

这样称呼它：

executeMyAnimationFunction(function(){
    console.log('animation complete');
});

或者如果你坚持使用承诺：

executeMyAnimationFunction(){
    var dfd = $.deferred();
    $('div').animate({ height: '1px' }, 500, function(){
        dfd.resolve();
    });
    return dfd.promise();
}
executeMyAnimationFunction().done(function(){
    console.log('animation complete');
});

请参考Old Post

这似乎是重复的问题，如果您调用多个函数，它将仅按顺序调用

相关文章：