Question

I don’t know what I am missing here. When the setInterval starts to run it says the function does not exist. I know it is there ( I did not include the variables…as that is not the issue). Any idea on why I am getting an error saying the functions don’t exist?

function midgroundFunc() {
    $('#midground').css({
        backgroundPosition: '0px 0px'
    });
    $('#midground').animate({
        backgroundPosition: "(" + midX + " " + midY + ")"
    }, midTime, midEase);
}

function foregroundFunc() {
    $('#foreground').css({
        backgroundPosition: '0px 0px'
    });
    $('#foreground').animate({
        backgroundPosition: "(" + foreX + " " + foreY + ")"
    }, foreTime, foreEase);
}

function backgroundFunc() {
    $('#back').css({
        backgroundPosition: '0px 0px'
    });
    $('#back').animate({
        backgroundPosition: "(" + backX + " " + backY + ")"
    }, backTime, backEase);
}
$(document).ready(function() {
    $('#midground').css({
        backgroundImage: 'url(' + midImage + ')'
    });
    $('#foreground').css({
        backgroundImage: 'url(' + foreImage + ')'
    });
    $('#back').css({
        backgroundImage: 'url(' + backImage + ')'
    });
    $.backstretch(backgroundStretch);



    midgroundFunc();
    foregroundFunc();
    backgroundFunc();

    setInterval("midgroundFunc()", midTime);
    setInterval("foregroundFunc()", foreTime);
    setInterval("backgroundFunc()", backTime);

});

This is the error I am getting:

Error: backgroundFunc is not defined
Line: 96

Error: midgroundFunc is not defined
Line: 94

Error: foregroundFunc is not defined
Line: 95

Answer 1

Call the functions directly instead of using a string. That way you avoid the scoping issue:

 setInterval(midgroundFunc, midTime);
 setInterval(foregroundFunc, foreTime);
 setInterval(backgroundFunc, backTime);