使用 jQuery 进行异步 DOM 树遍历

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();
    }
});

Answer 2

您可以查看https://github.com/wilsonpage/fastdom/ ，它正是这样做的，dom 中的异步操作。

Answer 3

You may want to check this approach

https://gist.github.com/stelf/4b6935071447724c7066

based on Kris Kowal's Q library. Basically similar to SynXsiS's idea, but a bit more structured in terms of Promises/Deffered objects.

Answer 4

If you can use HTML5, some browsers have support for web workers. https://developer.mozilla.org/En/Using_web_workers This may be an option. You may be able to pass the DOM as document to the methods and go from there.