Question

I would like to perform a long running, node-by-node walk of the DOM, calling a function on each node, but without making the browser unresponsive.
So I’m thinking asynchronous is the way to go.

I think jQuery Deferred objects could provide a solution, but I haven’t managed to come up with one yet.

Can anyone give an example of how you could do this with jQuery (or another library, if one particularly stands out as suitable; or pure Javascript and DOM methods).

To further complicate things, I would like the ability to traverse in different orders, for example postorder, but not yet a requirement.

Answer 1

You could do this recursively with setTimeout. Since Javascript is single threaded you can create the illusion of having multiple threads by relinquishing the thread periodically. Calling setTimeout will queue the remaining work and process any outstanding events before continuing.

Here’s a working example with jQuery:

function traverse(node, visitor, root) {
    if (root === undefined)
        root = node;

    visitor(node, function() {
        if (!node.length)
            return;

        let nextNode;
        if (node.children().length) {
            nextNode = node.children().first();
        } else {
            nextNode = node;
            do {
                if (root.length && nextNode.length && nextNode[0] == root[0]) {
                    nextNode = $();
                    break;
                } else if (nextNode.next().length) {
                    nextNode = nextNode.next();
                    break;
                } else {
                    nextNode = nextNode.parent();
                }
            } while (nextNode.length);
        }

        setTimeout(function() { traverse(nextNode, visitor, root); }, 200);
    });
}

This will call visitor with all DOM nodes in depth-first pre-order traversal, then call visitor with an empty jQuery object to indicate that it’s done. visitor must call its second parameter to proceed with traversal:

traverse($('#rootNode'), function(node, proceed) {
    if (!node.length) {
        console.log('done with traversal');
        // no proceed() call at the end
    } else if (node.hasClass('my-class')) {
        // let's say that this click triggers an AJAX request that makes a node visible later in traversal
        node.trigger('click');
        proceed(); // continue traversal
    } else if (node.hasClass('ajax-response-container')) {
        function checkIfVisible() {
            if (node.is(':visible')) {
                // yay, ajax response arrived
                console.log('AJAX response', node.html());
                // continue traversal
                proceed();
            } else {
                // wait for ajax node to become visible
                window.requestAnimationFrame(checkIfVisible);
                // no proceed() call - don't continue traversal yet
            }
        }

        checkIfVisible();
    } else {
        // continue traversal for any other node encountered
        proceed();
    }
});