Databases
StackOverflow2013
Postsdbo
POJavascript callback hell with setTimeout();
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJavascript callback hell with setTimeout();
    primarykey
    data
    text
    <p>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 <a href="https://stackoverflow.com/questions/4234619">How to avoid long nesting of asynchronous functions in Node.js</a> or <a href="https://stackoverflow.com/questions/7544249">Chained callback readability in Javascript?</a>) do not answer to my satisfaction.</p> <p>I want to perform several Javascript callbacks so that I have a sequence of four actions occurring one after another. Here is the source:</p> <pre><code>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;} );} );} ); </code></pre> <p>The load() and fade() functions are very similar except for internal semantic details, and they look something very similar to this:</p> <pre><code>function load(menuCategory, data, step, callback) { menuCategory.parentNode.style.width = data+"px"; data += step; if(dataIn &lt;= data &amp;&amp; data &lt;= dataOut) { setTimeout(function() { load(menuCategory,data,step,callback) }, 15); } else if(callback &amp;&amp; (typeof(callback) == 'function')) { callback();} } </code></pre> <p>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.</p> <p>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)?</p> <p>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.</p> <p>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. :)</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USL0j1k
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POJavascript callback hell with setTimeout();
      1. This table or related slice is empty.
      1. VTDownMod
    2. VO
      singulars
      1. POJavascript callback hell with setTimeout();
      1. This table or related slice is empty.
      1. VTDownMod
    3. VO
      singulars
      1. POJavascript callback hell with setTimeout();
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI think the question "*Why do you use `setTimeout(func(),0)`?*" is very legitimate, as neither your `fade` nor your `load` function return functions that could be timed-out with [`setTimeout`](https://developer.mozilla.org/en-US/docs/DOM/window.setTimeout). Is this a flaw in your question or is it the actual reason for your code mess?
      singulars
      1. POJavascript callback hell with setTimeout();
      1. USBergi
    2. COhttp://javascript.info/tutorial/events-and-timing-depth
      singulars
      1. POJavascript callback hell with setTimeout();
      1. USL0j1k
    3. COYou could try making a fake stack as an array of objects `fakeStack = []`, where the arguments to `fade` or `load` as key/value pairs in the objects, `fakeStack.push({cat:div, data:fadeIn, step:-20})` then work with `fakeStack[0]` and when you meet the end of the loop, call again `fakeStack.shift()`.
      singulars
      1. POJavascript callback hell with setTimeout();
      1. USPaul S.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload