Execute after cleartimeout function finished (jQuery)

Question

I have this istuation. I have a setTimeout to a function in which I fade out and fade in an element. In a few seconds this timeout is cleared with cleartimeout and right after is called .hide() to hide this element. The problem is that sometimes it doesnt hide the element. I have a feeling it has something to do with timing.

Example:

function first_func(){
    $('.element').fadeOut(function(){
        // Do other stuff like change element's position
        $('.element').fadeIn();
    });

    interval1 = setTimeout(function(){first_func()},500);           
}

function second_func(){
    countdown--;
    if (countdown<0){
        last_func();
    }
    interval2 = setTimeout(function(){second_func()},1000);         
}

function begin_func(){
    first_func();
    second_func();
}

function last_func(){
    clearTimeout(interval1);
    clearTimeout(interval2);
    $('.element').hide();
}

So basically the problem is that in last_func I clear both intervals and HIDE the element, but sometimes the element is still visible on the page. So I am guessing that it does hide but the interval is still in progress and it fades back in.

If anyone would have some suggestion please

Answer 1

Just a suggestion, but this bit appears wrong to me:

function second_func(){
    countdown--;
    if (countdown<0){
        end_func();
    }
    interval2 = setTimeout(function(){second_func()},1000);         
}

Even if you're calling end_func() to stop everything, you're setting a new timeout after that.

function second_func(){
    countdown--;
    if (countdown<0){
        end_func();
    } else {
        interval2 = setTimeout(second_func, 1000);
    }       
}

Another hint: To avoid that running fadeIn/fadeOuts affect the hiding of the element, you should clear the animation queue:

$('.element').stop(true, true).hide();

Answer 2

You seem to never call last_func, is end_func() supposed to be last_func()?

This works: http://jsfiddle.net/CZ9hr/1/

May I suggest a simpler approach for what you seem to want to achieve: http://jsfiddle.net/fSEjR/2/

var countdown = 3,
    $element = $('.element');

for (var i = 0; i < countdown; i++) {
    $element.fadeOut().fadeIn(function() {
        countdown--;
        if (countdown === 0) $element.hide();
    });
};

This works because animations are automatically queued in jquery.

Answer 3

默认情况下，fadeIn和fadeOut使用400毫秒的持续时间，你可以通过设置第一个参数来改变它。

$('.element').fadeOut( [duration] [, callback] );