How to implement multiple callback functions

Question

I am new to JavaScript and I work in node, which requires a good understanding of asynchronous programming and callback. I found that using built-in functions is very simple, even when your callbacks have several levels. Your built-in callbacks just end in closure.

However, if you have several levels of callbacks in which many callbacks are similar to execution routes, you end up rewriting a lot of callback code over and over in separate callback chains. For example, if the definitions mycb1 and mycb2 below move outside A, they no longer have implicit access to A variables and therefore no longer function as closures.

An example with built-in definitions where they function as closures.

mod.A=function(){ var mycb1=function(err){ if (!err){ var mycb2=function(err){ cb(err); }; mod.foo2(args,mycb2); } else{cb(err);} }; mod.foo1(args,mycb1); } mod.foo1 = function(args,cb){ //do some work cb(err); }; mod.foo2 = function(args,cb){ //do some work cb(err); } //execute mod.A(); 

I want to do the following, but be able to change the scope of the variables for the functions mycb1 and mycb2 so that they can be used as a closure from where they are called. For example:

 var mycb2=function(err){ ... cb(err); }; var mycb1=function(err){ if (!err){ mod.foo2(args,mycb2); //but have it act like a closure to mycb1 } else{cb(err);} }; mod.A=function(){ ... mod.foo1(args,mycb1); //but have it act like a closure to A } mod.foo1 = function(args,cb){ //do some work cb(err); } mod.foo2 = function(args,cb){ //do some work cb(err); } 

I know that I can implement a project that either sets a variable at the mod level so that they are available for mod level functions. However, this, apparently, somewhat pollutes the region of the mod variable, which can be used only by a few of its "methods". I also know that I can pass variables to make them available for callbacks when they are executed. However, if I understand how JS and callbacks work, I have to pass them to fooX and then redirect them to callbacks. This also doesn't seem like a good plan. Is it possible to change the scope of a variable so that it acts as a closure from the point of its execution, and not to its definition point? If not, what is the best way to modulate your callback code?

Answer 1

In general, there is no need to create another function that has access to close. You can create a function in a string using a simple anonymous function that passes some arguments to the parent callback as parameters, accepting the rest (i.e. a partial function), or using Function.bind () to create a partial function.

For example, if you originally had:

 function(...) { // closure vars x1, y1 foo.bar( function(result) { // do something with x1 and y1 }); } 

You can extract this:

 var callback = function(x1, y1, result) { // do something with x1 and y1 }; function(...) { // closure vars x1, y1 // option 1: make your own partial function foo.bar( function(result) { return callback(x1, y1, result); }); // with ES6: foo.bar( (result) => callback(x1, y1, result); }); // option 2: use Function.bind foo.bar( callback.bind(this, x1, y1); ); } 

Answer 2

Here is an example of a nested callback without closing and not nesting. it captures the specified page, finds the third link, then shows the source of this link to the user.

in this case, when it starts from here in the console and loads onto the main page, the exit page is the third link, and its contents are warned.

all callbacks are siblings, and there are no external state variables, just pure asynchronous functionality:

 // look ma, no nesting! function ajax(a, c) { var e = new XMLHttpRequest; e.onload= ajaxOnload.bind(this, c, e); e.open( "GET", a, !0); e.send(); return e } function ajaxOnload(c, e) { c(e.responseText, e); } function cbFind3(cb, s){ var t=document.createElement("body"); t.innerHTML=s; var lnk= t.getElementsByTagName("a")[3].href; ajax(lnk, cb); } function grabThirdLinkSource(url, cb){ ajax(url, cbFind3.bind(this, cb)); } grabThirdLinkSource("/", alert); 

this is not the most useful example, but it shows how chains of functions through calls with bind (). I used vanilla ajax and avoided promises just to show how this interaction style is performed without any complications. even the ajax helper uses a non-nested function to feed a responseText to the "main" callbacks instead of an event or an entire xhr object.