JSFiddle - React, Tailwind, and code Playground
JavaScript
// A single global variable to manage our asynchronous functions.
window.q = {
// An empty jQuery object safely not bound to a DOM element.
jq: $({}),
// In a real world application make this 12-50.
// I made it huge to make it more obvious what is happening.
wait: 1000,
// This is arbitrary, just don't call it 'fx'.
queueName: 'default',
// Bastard child of _.delay and $.queue()
queue: function (func) {
var args = Array.prototype.slice.call(arguments, 1);
return this.jq.queue(this.queueName, function (next) {
return func.apply(null, args);
});
},
dequeue: function () {
setTimeout(this._dequeue, this.wait);
},
_dequeue: function () {
// At this point "this" is now the window.
// Asynchronous functions are weird.
_this = window.q;
_this.jq.dequeue(_this.queueName);
}
};
foo = {
_init: function (context, settings) {
// Doing things in here..
document.write(settings.toString());
document.write('<br />');
},
init: function (context, settings) {
console.log('pop');
_this = foo;
// Do some validation before initialising.
// ...
// Initialise.
_this._init(context, settings);
// Trigger the next function in the queue.
window.q.dequeue();
}
};
bar = {
doStuff: function () {
// Let everyone know that bar was here.
document.write('bar<br />');
// There's no harm in calling dequeue()
// on an empty queue.
window.q.dequeue();
}
}
// Document ready.
$(function () {
fooContext = $('#content');
fooSettings = 'not a fail';
// Create/use a queue on the body element.
// Queues can be added to *any* jQuery object, even just $({});
window.q.queue(foo.init, fooContext, fooSettings);
window.q.queue(bar.doStuff);
window.q.queue(foo.init, fooContext, fooSettings);
// We've already cloned this for our queue
// so modifying this now in the current scope should
// not change what is displayed.
fooSettings = 'fail';
...