javascript - 第二个函数在第一个函数完成之前启动，Javascript

Question

我在这两个大if's之外有一个for循环。我的问题似乎是第二个功能似乎会短暂延迟。难道不应该先完成第一个函数，然后再运行第二个函数吗？

无法弄清楚为什么第二个在第一个完成之前开始的问题。当第二个函数也触发时，它会将原始数字从 0 增加到 60。

if(activeSlideBoolean && activeSlide < i){
    step = 0;
    div[activeSlide].className = 'slide left';

    animateHalfLeft(activeSlide);

    function animateHalfLeft(activeSlide){
        if(step < -60){
            return; 
        }

        div[activeSlide].style.left = step+'em';
        step -= 6;


        setTimeout (function(){ animateHalfLeft(activeSlide);},100);


    }

    activeSlideBoolean = false;

}
if((activeSlideBoolean === false) && (RestOfSlides)){
    step = 60;
    animateTotalLeft(RestOfSlides);

    function animateTotalLeft(RestOfSlides){
        f(step < -60){
            return; 
        }

        div[RestOfSlides].style.left = step+'em';
        step -= 6;
        setTimeout (function(){ animateTotalLeft(RestOfSlides);},100);  

    }

}

Answer 1

您的函数 animateHalfLeft 和 animateTotalLeft 完全相同，除了参数 activeSlide 和 RestOfSlides 之外。

我建议首先创建一个单独的函数:

function animateToLeft(whatToSlide){
        if(step < -60){
            return; 
        }

        div[whatToSlide].style.left = step+'em';
        step -= 6;
        setTimeout (function(){ animateToLeft(whatToSlide);},100);  

    }
}

但该函数仍在 setTimeout 结束(甚至开始)之前完成。

Javascript 是一种函数式语言。使用它:

function animateToLeft(whatToSlide, step, callback){
        if(step < -60){
            if (typeof callback === 'function') {
                callback();
            }
            return; 
        }

        div[whatToSlide].style.left = step+'em';
        step -= 6;
        setTimeout (function(){ 
            animateToLeft(whatToSlide , step, callback);
        },100);  
    }
}

if(activeSlideBoolean && activeSlide < i){
    var isStarted = false;
    animateToLeft(activeSlide, 0, function() {
        if (isStarted) {
            return;
        }
        isStarted = true;

        if (RestOfSlides) {
            animateToLeft(RestOfSlides, 60, null);
            // Finishing order 3
        }
    }); 
    // Finishing order 1
}

if(activeSlideBoolean === false && RestOfSlides){
    animateToLeft(RestOfSlides, 60, null);
    // finishing order 2
}

我不知道它是否适合你(不要白痴地复制/粘贴)，但对我来说，这是一个好的开始。