StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<blockquote> <p>How do I need to design any function I want to add to the queue so that it either a) publishes its state (and how do I have the queue detect that?) I'm guessing it would involve some sort of custom event system</p> </blockquote> <p>Exactly.</p> <p>That would be the concept of <a href="http://wiki.commonjs.org/wiki/Promises" rel="nofollow noreferrer">Promises</a> - your animation function returns an object on which the queue can attach the "done" listener. If you don't want to use one of the <a href="https://github.com/promises-aplus/promises-spec/blob/master/implementations.md" rel="nofollow noreferrer">many many libraries</a>, you can also implement your own system (a simple pub-once/sub-often pattern). Have a look at <a href="https://stackoverflow.com/questions/17718673/how-is-a-promise-defer-library-implemented">How is a promise/defer library implemented?</a> (especially the <a href="https://stackoverflow.com/revisions/17724387/1">first</a> <a href="https://stackoverflow.com/revisions/17724387/2">two</a> revisions of my answer) for some inspiration…</p> <p>The queue would then work like</p> <pre><code>var promise = queue[i].fn.apply(null, queue[i].args); promise.then(function() { i++; // … "recurse" }); </code></pre> <blockquote> <p>b) can accept the callback from the queue? That would be easier, and look something like: <code>function name(callback, param1, param2, ... paramX) {…}</code> where the callback is always the first parameter, so that any number of other parameters could be tacked on.</p> </blockquote> <p>Exactly. Or the last parameter, which is more common. Have a look at the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" rel="nofollow noreferrer"><code>apply</code> Function method</a> for calling functions with a dynamic number of arguments.</p> <p>The queue would be something like</p> <pre><code>function step(i) { function callback() { step(i+1); // "recurse" } if (i < queue.length) queue[i].fn.apply(null, queue[i].args.concat(callback)); // else: all done } </code></pre> <blockquote> <p>But like I said, I am having real trouble wrapping my brain around all of this, so a thorough explanation / any alternatives would be greatly appreciated!</p> </blockquote> <p>Well, you've nailed it already - there are no other alternatives than the two methods you outlined. The promise approach is more sound and works better for variadic parameters of the animation functions, while the callback approach is the simpler one.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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