callLazy Function

If you are new to the site, check out the Lazy Function Pattern article and see its application with a timer in Deferred DOM Access. Todays article will show how the pattern can be abstracted into a general function, callLazy. This technique will allow developers to rewrite methods that are dependent on other methods and/or data to be immediately callable after defining, but before the dependent function is available, by waiting for the dependent to make itself available before executing.

Example 1: callLazy

var mes_callLazy = function(fx, isReady, m, n) {
	var max = (0 < m) ? m : 25,
		index = (0 < n) ? n : 0;

	if (index > max) {return;} // this prevents these calls from running forever

	if (fx) {
		if (isReady()) {
		else {
			setTimeout(function() {, fx, isReady, max, index + 1);}, 100);

The method in Example 1 requires 2 parameters (fx, isReady) and accepts an additional 2 optional parameters (m, n). The fx parameter is the method to be executed after required method or data has loaded. The isReady parameter is a function that returns TRUE when the required method or data has loaded, and FALSE otherwise. Originally, isReady was a truthy object, but occasionally this caused issues with objects that were not inside a closure, so instead a closure is forced by requiring isReady to be a function. Lastly, m is the maximum number of times to attempt calling and n is the index of the current call; generally n should only be used by the call lazy function itself. The default numbers (25 for m and 100 for the timeout) will attempt to call the provided function (fx), 25 times over a period of about 2.5 seconds.

Most frequently I use this technique with objects that are loaded via AJAX. For example, on, there are many in-page popups that the user can trigger. As developers, we do not want to slow down the initial page load, by preloading the HTML for all the possible popups. Instead, there is a fetch and cache system, which only grabs the popups as needed. However, since AJAX is asynchronous, the developer does not know when popup will be available.

Lets assume that before the DOM of each popup is fetched that a wrapper object is returned, an instance of Popup. The Popup object has lots of goodness available to it, but for the sake of this article, we will just consider open. The open method of Popup displays the popup on the page. Now consider that there is a link on the page, Show Accounts, which when clicked will trigger the AJAX request to get the popup, but use callLazy to immediately call the open method, so that as soon as the popup is rendered, it displays.

Example 2: Popup - Using callLazy

var showAccountCallback = function() {
    var popup = new Popup(account);
    if (popup.isRendered()) {;
    else {
        popup.render(); // assume initializes AJAX request
        mes_callLazy(, popup.isRendered, 100);

Example 2 will execute the "" method as soon as the "popup.isRendered" method returns true. The maximum number of attempts has been increased to 100, because AJAX request performance can be degraded by many factors and a maximum timeout of 10 seconds is a more reasonable expectation.

The callLazy method can also be used to replace existing Lazy Function Patterns. For example suppose there is a method addClassToBody that adds a className to the BODY tag, but the developer is not sure that the BODY tag is available yet:

Example 3: Using callLazy for Lazy Function Pattern

var addClassToBody = function(className) {
    mes_callLazy(function() {
	var bd = document.getElementsByTagName(body)[0];

        addClassToBody = function(className) {
            YAHOO.util.Dom.addClass(bd, className);

    }, function() {
        return document.getElementsByTagName(body)[0];

The developer calls addClassToBody from the HTML header, which then executes callLazy. The isReady method just checks for the existence of the BODY tag. Once the BODY tag is found, the execution method creates a pointer to the BODY tag, then overrides the addClassToBody function to instead apply a className to that pointer, before finally calling the overwritten function. A closure is used to remember the original className passed into the function before callLazy executed.

I find callLazy to be extremely useful, providing a consistent way to force method execution to wait. And although it works great as is, I do not like that there is no feedback if the callback execution times out. A future version of this tool will probably allow developers to pass in a failure function as well, so that you can attempt to recover from a function execution failure.