Question

What follows is my Javascript document, that runs in $(document).ready(). The Javascript is loaded from the footer of my site. For the purposes of simplification, I’ve put [...] in place of irrelevant code.

// When the document is ready, run the display scripts
$(document).ready(function() {

// Define the frame height functions
function getDocHeight(doc) {
    [...]
}
document.domain = 'mysite.com';

function resizeIframe() {setIframeHeight('date-price-book');}

function setIframeHeight(ifrm) {
    [...]
}

function AutoResize() {
    resizeIframe();
    resizeIframe();
    setTimeout("AutoResize()", 500);
}

AutoResize();

[... more Javascript code...]

When I run the page, I get the error: Uncaught ReferenceError: AutoResize() is not defined.

I can stop this error from occurring by commenting out the line AutoResize(); (final line in my example code above). But why is this error being thrown? Surely the AutoResize() function has just been defined in the lines immediately above it?

Thanks for your help!

Answer 1

setTimeout("AutoResize()", 500);

When the setTimeout above is executed, it evalutayes the string in global scope. AutoResize() is hidden inside the closure so it is not found.

Assign a reference to the function by using the name.

setTimeout(AutoResize, 500);

other option is a closure

setTimeout(function() { AutoResize(); }, 500);

You would use the closure method if you want to send a parameter to the function.