Question

I’m trying to wait and then get a message when all images in an array have completed loading (using .complete), per the answer here. As such I set up an infinite loop like the below. however, when I run this I get an error that checkForAllImagesLoaded() is not defined. This code is being run through a bookmarklet, and as such it’s all wrapped up in an anonymous function construct (as below). If I re-define my function and variable outside of that construct, it works. But that seems to be a poor way to write a bookmarklet. How can I fix this so it will still recognize the function after the setTimeout?

(function() {

    //var images = array of images that have started loading

    function checkForAllImagesLoaded(){
        for (var i = 0; i < images.length; i++) {
            if (!images[i].complete) {
               setTimeout('checkForAllImagesLoaded()', 20);
               return;
            }
        }
    }

    checkForAllImagesLoaded();

})();

Answer 1

Remove the function call, and take out the quotes. If you don’t put the quotes, setTimeout gets a direct reference to the function which it can invoke later. However, if inside a string such as "checkForAllImagesLoaded" or "checkForAllImagesLoaded()", then it will execute the code passed-in when the timeout occurs.

At that time, checkForAllImagesLoaded will be searched for in the global object (window) but it is not defined there, reason being why you’re getting the undefined error.

Your code is wrapped in a self-calling anonymous function, and outside of it checkForAllImagesLoaded does not exist. So pass a direct reference to the function in your setTimeout call, instead of a string.

setTimeout(checkForAllImagesLoaded, 20);

setTimeout can be called with either a function (and optional arguments), or a string containing JavaScript code:

var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);
var timeoutID = window.setTimeout(code, delay);