How to unchain chained anonymous functions in Javascript?_问答_开发者

Is there a way to unnest (or unchain) the chained anonymous functions below? I include my try after the script with nested anonymous functions. I want to define separately each function defined anonymously on its own to see clearly and understand where each function starts and ends and what they do. Thanks.

A script with nested anonymous functions that I want to separate (taken from here):

<html>
<script>
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.getSelected(null, function(tab) {

  chrome.tabs.sendRequest(tab.id, {action: "getDOM"}, function(response) {
    var firstParagraph = response.dom;
  //}); moved to end to get the variable firstParagraph

var formData = new FormData();
formData.append("url", tab.url);
formData.append("title", tab.title);
formData.append("pitch", firstParagraph);
//formData.append("user_tag_list", "tag1, tag2");


var xhr = new XMLHttpRequest();
xhr.open("POST", "http://ting-1.appspot.com/submithandlertest", true);
xhr.onreadystatechange = function (aEvt) {
    if (xhr.readyState == 4) {
        if (xhr.status == 200){ 
            console.log("request 200-OK");
            chrome.browserAction.setBadgeText ( { text: "done" } );
            setTimeout(function () {
            chrome.browserAction.setBadgeText( { text: "" } );
            }, 2000);
        }else{
开发者_运维知识库            console.log("connection error");
            chrome.browserAction.setBadgeText ( { text: "ERR" } );
     }        
  }        
};
xhr.send(formData);


}); //chrome.tabs.sendRequest
        });
    });
</script>
</html>

My try to unnest anonymous function and reconstruct the script:

functionForSendRequest = function (response) {var firstParagraph = response.dom;
            var formData = new FormData();
                formData.append("url", tab.url);
                formData.append("title", tab.title);
                formData.append("pitch", firstParagraph);
            var xhr = new XMLHttpRequest();
                xhr.open("POST", "http://ting-1.appspot.com/submithandlertest", true);
                xhr.onreadystatechange = function (aEvt) {
                if (xhr.readyState == 4){
                    if (xhr.status == 200){ 
                        console.log("request 200-OK");
                        chrome.browserAction.setBadgeText({text: "done" });
                        setTimeout(function(){
                        chrome.browserAction.setBadgeText({text: ""});}, 2000);}
                    else{console.log("connection error");
                        chrome.browserAction.setBadgeText({text: "ERR"});}}};
                xhr.send(formData);}}

argumentToGetSelected = chrome.tabs.sendRequest(tab.id, {action: "getDOM"}, functionForSendRequest()}

...

functionForGetSelected = function (tab) {chrome.tabs.sendRequest(tab.id, {action: "getDOM"}, *function for getSelected goes here*)}

To see the logic clearly, instead of "unchaining" them why not just try to practice good indentation. Then you can visually follow each method according to its indentation level. Like this:

chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.getSelected(null, function(tab) {
        chrome.tabs.sendRequest(tab.id, {action: "getDOM"}, function(response) {
            var firstParagraph = response.dom;

            var formData = new FormData();
            formData.append("url", tab.url);
            formData.append("title", tab.title);
            formData.append("pitch", firstParagraph);
            //formData.append("user_tag_list", "tag1, tag2");

            var xhr = new XMLHttpRequest();
            xhr.open("POST", "http://ting-1.appspot.com/submithandlertest", true);
            xhr.onreadystatechange = function (aEvt) {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200){ 
                        console.log("request 200-OK");
                        chrome.browserAction.setBadgeText ( { text: "done" } );
                        setTimeout(function () {
                            chrome.browserAction.setBadgeText( { text: "" } );
                        }, 2000);
                    } else {
                        console.log("connection error");
                        chrome.browserAction.setBadgeText ( { text: "ERR" } );
                    }        
                }        
            };
            xhr.send(formData);
        }); //chrome.tabs.sendRequest
    }); // chrome.tabs.getSelected
}); // chrome.browserAction.onClicked.addListener

Or, if you want to "unchain", the only really obvious thing to do is to define that inner callback separately, like this:

var handle_request = function(response) {
    var firstParagraph = response.dom;

    var formData = new FormData();
    formData.append("url", tab.url);
    formData.append("title", tab.title);
    formData.append("pitch", firstParagraph);
    //formData.append("user_tag_list", "tag1, tag2");

    var xhr = new XMLHttpRequest();
    xhr.open("POST", "http://ting-1.appspot.com/submithandlertest", true);
    xhr.onreadystatechange = function (aEvt) {
        if (xhr.readyState == 4) {
            if (xhr.status == 200){ 
                console.log("request 200-OK");
                chrome.browserAction.setBadgeText ( { text: "done" } );
                setTimeout(function () {
                    chrome.browserAction.setBadgeText( { text: "" } );
                }, 2000);
            } else {
                console.log("connection error");
                chrome.browserAction.setBadgeText ( { text: "ERR" } );
            }        
        }        
    };
    xhr.send(formData);
}

chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.getSelected(null, function(tab) {
        chrome.tabs.sendRequest(tab.id, {action: "getDOM"}, handle_requeest);
    });
});