setTimeout doesn't seem to be calling the function

Question

The code worked great until I added the setTimeout. Now, no matter how I attempt to call the functions in setTimeout ( setTimeout(function(){fadeOut()},1000); setTimeout("fadeOut()",1000); etc ) it doesn't seem to get to the function at all.

I'm a Javascript newbie so any and all help is appreciated =]

javascript code:

var slideArray = ["slide1","slide2","slide3","slide4","slide5","slide6"];
var currentSlide = null;
var current = null;
var done = false;

function fade(newSlide)
{
    if(currentSlide === null)
    {
        currentSlide = slideArray[0];
        document.getElementById(currentSlide).style.opacity = 1.0;

        for(var i=1;i<slideArray.length;i++)
            document.getElementById(slideArray[i]).style.opacity = 0.0;
    }

    current = document.getElementById(currentSlide);
    done = false;
    do
    {
        window.setTimeout(fadeOut,1000);
    } while(done == false);

    currentSlide = newSlide;
    current = document.getElementById(currentSlide);
    done = false;

    do
    {
        window.setTimeout(fadeIn,1000);
    } while(done == false);
}

function fadeOut()
{
    if(parseFloat(current.style.opacity)-0.1>.0000001)
    {
    current.style.opacity = parseFloat(current.style.opacity) -0.1;
        done = false;
    }
    else
    {
        current.style.opacity = 0.0;
        done = true;
    }
}

function fadeIn()
{
    if(0.9-parseFloat(current.style.opacity)>.0000001)
    {
        current.style.opacity = parseFloat(current.style.opacity)+0.1;
        done = false;
    }
    else
    {
        current.style.opacity = 1.0;
        done = true;
    }
}

Answer 1

You can't use this structure:

do
{
    window.setTimeout(fadeIn,1000);
} while(done == false);

Because the code in the setTimeout() runs sometime LATER, your value of done will NEVER be changed and this loop will run forever. And, as long as it runs, the setTimeout() never gets to fire either (because javascript is single threaded).

Instead, what you should do is launch the next setTimeout(fadeIn, 1000) from the fadeIn() function if you aren't done.

function fadeOut()
{
    if(parseFloat(current.style.opacity)-0.1>.0000001)
    {
        current.style.opacity = parseFloat(current.style.opacity) -0.1;
        setTimeout(fadeOut, 1000);
    }

    else
    {
        current.style.opacity = 0.0;
    }
}

Answer 2

Remember that javascript is single-threaded, so your setTimeout'et functions will not be called until it is finished running the current script. Which will never happen since you're in a loop that's never gonna end (untill you're out of memory from all those setTimeout's). Just call setTimeout once and let the function return. And forget the idea of waiting for it to have happened.