Q:

JavaScript: how do I wait for a function to end before proceeding to next line?

I'm using JavaScript to do some smooth animations for pop-up content. When a button on my site is clicked, an iframe appears in the foreground with some content loaded from an html file.
I'm having a problem with my fade-out animation. I call two functions, opacityfadeout() and resetzindex(), in that order. However, the z-index of the iframe changes before the fade-out occurs. 
I need resetzindex() to run only after opacityfadeout() has fully completed (bringing the opacity of the iframe to 0).
What is the simplest and cleanest solution to this simple dilemma?
function closecontent()
{
    opacityfadeout();
    resetzindex();
}

function opacityfadeout()
{
    var f = setInterval(function()
    {
        if(opacityvalue > 0.0)
        {
            opacityvalue -= increment;
        }
        else
        {
            clearInterval(f);
        }
        iframe.style.opacity = opacity;

    }, 16);
}

function resetzindex()
{
    iframe.style.zIndex = "-5";
}

A:

function closecontent()
{
    opacityfadeout(resetzindex);
}

function opacityfadeout(callback)
{
    var f = setInterval(function()
    {
        if(opacityvalue > 0.0)
        {
            opacityvalue -= increment;
        }
        else
        {
            clearInterval(f);
            if (callback) callback()
        }
        iframe.style.opacity = opacity;

    }, 16);
}

function resetzindex()
{
    iframe.style.zIndex = "-5";
}

