Question

Aloha. This is my first question here after eons of lurking. I apologize for the verbose but direct form of this question — as well as the limitations on acceptable answers — but I am here to contribute. I have a problem that other questions (for example How to avoid long nesting of asynchronous functions in Node.js or Chained callback readability in Javascript?) do not answer to my satisfaction.

I want to perform several Javascript callbacks so that I have a sequence of four actions occurring one after another. Here is the source:

var self = this;
fade(div, fadeIn, -20, function() {
  load(unload, dataOut, -10, function() {
    load(self, dataIn, 10, function() {
      fade(div, fadeOut, 20),0);
      unload = self;}
    );}
  );}
);

The load() and fade() functions are very similar except for internal semantic details, and they look something very similar to this:

function load(menuCategory, data, step, callback) {
  menuCategory.parentNode.style.width = data+"px";
  data += step;
  if(dataIn <= data && data <= dataOut) {
    setTimeout(function() { load(menuCategory,data,step,callback) }, 15);
  } else if(callback && (typeof(callback) == 'function')) { 
    callback();}
}

I have several questions associated with this mess, but first let me give you the answers I am NOT looking for. Answers using jQuery are not acceptable. Answers using other timing or “synchronicity” frameworks or modules are not acceptable. Answers questioning the reason for blocking execution are not acceptable. Answers using languages other than Javascript are unacceptable. Non-abstract answers are acceptable, but the final solution will need to be as abstract as possible, meaning the answer must be able to act on a variety of similar but slightly different actions.

Here is my primary question:
Is there a function/object I could use to apply these actions sequentially, to cut down on the callback hell going on here? In other words, what would an object look like if the object/function were able to synchronously execute each action as it was individually iterated through it (i.e. passed to it)?

Secondary question:
Is anyone aware of how much this callback business looks like goto() in other languages? Meaning, this nesting of callbacks feels very awkward and inelegant to me. Is there a Javascript language construct either being developed or already developed that will reduce this crazy business? Callback nesting is some of the hardest logic flow to follow. It just feels awkward.

My goal here is a tight, elegant, attractive, homegrown Javascript object/function — that I can call in a for() loop or equivalent — to apply these operations on each action in sequence. If you’ve read this far I want to thank you for your time and consideration. 🙂

Answer 1

using setTimeout(func(),0) in order to execute synchronously

No. Either use func() for a synchronous execution, or setTimeout(func, 0) to queue the execution (which makes it asynchronous).

Is setTimeout(func[…],0) the “most elegant” way to put this action onto the execution queue for rendered webpage objects? In other words, is there a “more elegant” way to block execution (i.e. do these things sequentially)?

Yes, this is the standard method. However, this does not block execution, and has nothing to do with sequencing. If the execution is synchronous, just execute it, if not you will have to deal with the callbacks and queuing a new task does not help.

Is anyone aware of how much this callback business looks like goto() in other languages? Meaning, this nesting of callbacks feels very awkward and inelegant to me. Is there a Javascript language construct either being developed or already developed that will reduce this crazy business?

No, I’m not aware of other languages, but afaik goto is a synchronous, control-flow-structuring statement as does not deal with asynchronous actions.

But no, there are no JavaScript language constructs (“syntactic sugar”) that help us around the continuation-passing style with its callback hell.

Is there a function/object I could use to apply these actions sequentially, to cut down on the callback hell going on here? In other words, what would an object look like if the object/function were able to synchronously execute each action as it was individually iterated through it (i.e. passed to it)?

My goal here is a tight, elegant, attractive, homegrown Javascript object/function — that I can call in a for() loop or equivalent — to apply these operations on each action in sequence.

Again you want “sequencially” instead of “synchronous” 🙂 Yes, there are [handcoded/homegrown] solutions which make dealing with callbacks easier. As those callback organisation libraries you mentioned do not satisfy you, I’d recommend to look into the very elegant and attractive Promise Api and its Deferred objects (see futures and promises for the concept).