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);
});
});
加载中,请稍侯......
精彩评论