第二个函数在第一个完成之前启动,Javascript

时间:2014-09-04 15:12:40

标签: javascript

我在这两个大if´s之外有一个for循环。我的问题似乎是第二个函数似乎在短时间内触发。不应该先完成第一个功能,然后第二个功能会运行吗?

无法解决为什么在第一次完成之前第二次启动的问题。当第二个功能触发时,它会将原始数量从零增加到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);  

    }

}

1 个答案:

答案 0 :(得分:2)

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

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

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
}

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