javascript - 功能同时触发

Question

我正在尝试编写一个函数，该函数按顺序淡出 X 元素，并在完成后运行另一个函数。

    function fadeOut(pro){
        $('.interactive ul li').each(function(i) {
            $(this).find('a').delay(200*(i+1)).fadeOut(200,function(){
                $('.opening-title').delay(500).fadeOut();
            });
            showTimeline(pro);
        });         
    }

    function showTimeline(pro){
        $('.timeline-container').addClass('in-view');
        console.log(pro);
    }

出于某种原因，“showTimeline()”同时运行，我不明白为什么？

<小时/>

完整的 JS

$(document).ready(function() {

    'use strict';

    function init() {

        function showPath(pro) {
            fadeOut(pro);

        }

        function fadeOut(pro) {
            $('.ul li').each(function(i) {
                $(this).find('a').delay(1200 * (i + 1)).fadeOut(200, function() {
                    $('.title').delay(500).fadeOut();
                });
            });
            showTimeline(pro);
        }

        function showTimeline(pro) {
            $('.container').addClass('in-view');
            console.log(pro);
        }

        $('.path').on('click', function() {
            showPath( $(this).attr('data-pro') );
        });


    } //end init

    init();

}); //end doc ready

Answer 1

您正在循环中调用 showTimeline 函数。而是这样调用它......

function fadeOut(pro) {
    $('.interactive ul li').each(function(i) {
        $(this).find('a').delay(200 * (i + 1)).fadeOut(200, function() {
            $('.opening-title').delay(500).fadeOut();
        });
    });
    showTimeline(pro);
}

function showTimeline(pro) {
    $('.timeline-container').addClass('in-view');
    console.log(pro);
}