Javascript递归：突破

Question

I'm having difficulty breaking out of this recursive function. The script is a background script for a chrome extension and is sending commands to a content script on the page. For each element in jsonArray, the script will need to:

1. Query the page and wait for page refresh
2. Grab specific headers

Once it has completed the whole array, it should stop.

Here's what I got:

function goGetEm(counter, path){

    key = jsonArray[counter];

    console.log("This is round "+counter+" and I am going to "+path);

    if(counter>=jsonArray.length){
        console.log("finishing");
        return;
    }

    if(path=="query"){
        console.log("querying "+jsonArray[counter]);
        message.sendMessage(tabID, {
            "submitquery": {
                "query": jsonArray[counter],
                "searchFieldID": searchFieldID,
                "submitID": submitID
            }
        }, function(response){
            chrome.tabs.onUpdated.addListener(function(tabID , info) {
                if (info.status == "complete") {
                    console.log("query complete");
                    goGetEm(counter, "grab");
                    return;
                }
            });
        });
    }
    else if(path=="grab"){
        console.log("grabbing");
        message.sendMessage(tabID, {
            "grabdata": {
                "targetID": targetID
            }
        }, function(response){
            console.log("grab complete");
            saveData(key, response);
            goGetEm(counter+1, "query");
            return;
        });
    }
    return;
}

goGetEm(0, "query");

The function does successfully submit queries and grab data. But I believe I'm losing track of all the different loops that are being called and not ending them correctly (I thought that's what all my "returns" would do)..

Here is the output (well, some of it)

This is round 0 and I am going to query bg.js:58
querying element0 bg.js:66
query complete bg.js:76
This is round 0 and I am going to grab bg.js:58
grabbing bg.js:84
grab complete bg.js:90
This is round 1 and I am going to query bg.js:58
querying element1 bg.js:66
query complete bg.js:76
This is round 0 and I am going to grab bg.js:58
grabbing bg.js:84
query complete bg.js:76
This is round 1 and I am going to grab bg.js:58
grabbing bg.js:84
grab complete bg.js:90
This is round 1 and I am going to query bg.js:58
querying element1 bg.js:66
grab complete bg.js:90
This is round 2 and I am going to query bg.js:58
finishing bg.js:60
Object
 bg.js:48
query complete bg.js:76
This is round 0 and I am going to grab bg.js:58
grabbing bg.js:84
query complete bg.js:76
This is round 1 and I am going to grab bg.js:58
grabbing bg.js:84
query complete bg.js:76
This is round 1 and I am going to grab bg.js:58
grabbing bg.js:84
grab complete bg.js:90
This is round 1 and I am going to query bg.js:58
querying element1 bg.js:66
grab complete bg.js:90
This is round 2 and I am going to query bg.js:58
finishing bg.js:60
Object
 bg.js:48
grab complete bg.js:90
This is round 2 and I am going to query bg.js:58
finishing bg.js:60
Object
 bg.js:48
query complete bg.js:76
This is round 0 and I am going to grab bg.js:58
grabbing bg.js:84
query complete bg.js:76
This is round 1 and I am going to grab bg.js:58
grabbing bg.js:84
query complete bg.js:76
This is round 1 and I am going to grab bg.js:58
grabbing bg.js:84
query complete bg.js:76
This is round 1 and I am going to grab bg.js:58
grabbing bg.js:84
grab complete bg.js:90
This is round 1 and I am going to query bg.js:58
querying element1 bg.js:66
grab complete bg.js:90

and on....

Answer 1

I think what's mixing you up is you have async IO going on in there. Recursion is about calling the current function and maintaining a call stack, but because you're dealing with callbacks, that doesn't really happen like you think. This return returns from the listener, not the outer container.

chrome.tabs.onUpdated.addListener(function(tabID , info) {
    if (info.status == "complete") {
        console.log("query complete");
        goGetEm(counter, "grab");
        return;
    }
});

What I'd do is rewrite it so it's iterative. I'd have an object with the callback methods, and the object internally tracks state in the same way you would with a stack.

var worker = {
    queue:[],
    onUpdatedListener: function(tabID , info) {
        ...
    },
    sendMessageComplete: function(response) { ... },
    doWork: function(...) { ... },
    init: function(queue) {
        this.queue = queue;
    }
}

worker.init(jsonArray);
worker.doWork();