Question

I’m trying to write a function in Javascript (with jQuery, if you want):

function fetchItem(itemId) { return /* ??? */; }

This function relies on a second, predefined and unmodifyable function that looks like this:

function load(callback) { /* ... */ }

This function is asynchronous. After calling it, it fetches n items via XHR, then when they have arrived, stores them in the DOM, then invokes the callback.

fetchItem uses a simple jQuery selector (irrelevant here) to check the DOM for the element with itemId and calls load if the item isn’t there yet. Rinse and repeat.

My problem is that I want to wrap multiple asynchronous calls of load into my synchronous fetchItem function, which should return the DOM element with itemId after it has made enough load calls.

Pseudo code, if load was synchronous:

function fetchItem(itemId):
    while not dom.contains(itemId):
        load()
    return dom.find(itemId)

My first attempts at doing this in Javascript, which probably display a lot of misconceptions about Javascript’s closures and execution model: 😉

function fetchItem(itemId) {
    var match = undefined;

    function finder() {
        match = $(...).get(0);
        if(!match) {
            load(finder);
        }
    }
    finder();

    return match;
}

Obviously, this fails because the return is executed before the first callback. Also, as you can see I had some problems getting match back out to fetchItem. Is it properly protected by the closure here? Would this work if fetchItem was executed multiple times in parallel, assuming that load supports this (and doesn’t mix up the DOM)?

I’m probably missing a perfectly good pattern here, but I don’t really know what to google for…

Answer 1

Seems like everybody agrees that I need to introduce my own callback, so here’s my (so far final) working solution:

var MAX_FETCH_MORE = 3;

/*
 * Searches for itemId, loading more items up to MAX_FETCH_MORE times if necessary. When
 * the item has been found or the maximum reload count has been reached, the callback
 * is invoked, which is passed the DOM object of the item wrapped in a jQuery object, or
 * undefined.
 */
function executeWithItem(itemId, callback, fetchCycleCounter) {
    // initialize fetchCycleCounter on first iteration
    if(!fetchCycleCounter) fetchCycleCounter = 0;
    console.debug('iteration ' + fetchCycleCounter + '/' + MAX_FETCH_MORE);

    // try to find the item in the DOM
    match = $('div[data-item-id="' + itemId + '"]').get(0);
    if(match) {
        // if it has been found, invoke the callback, then terminate
        console.debug('found: ' + match);
        callback($(match));
    } else if(!match && fetchCycleCounter < MAX_FETCH_MORE) {
        // if it has not been found, but we may still reload, call load() and pass it
        // this function as the callback
        console.debug('fetching more...');
        load(function() {executeWithItem(itemId, callback, fetchCycleCounter+1);});
    } else {
        // give up after MAX_FETCH_MORE attempts, maybe the item is gone
        console.debug('giving up search');
    }
}

// example invocation
executeWithItem('itemA01', function(item) {
    // do stuff with it
    item.fadeOut(10000);
});

Thanks to everybody for encouraging me to introduce another callback, it hasn’t turned out looking so bad. 🙂