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();