Collection / Array Events
In my jQuery web app, I use events to a great extent.
My component for making client ajax requests (name "comm") on the server has a queue.
This queue is similar to the Backbone.js collection.
So every time I put a new request object into the "comm" collection, the comm object receives an "add" event, and the "comm" working method looks like there is currently a current request. If not, the worker method processes the request and finally, when everything is working fine, a "complete" event is fired on the request object.
In this comm-component, only one request at a time is possible. If I add a request object to "comm" and the "add" event is fired and the working method sees that there is already a request, then nothing happens.
My question is, in this situation, is the best approach to handle this raw request object REGARDING "EVENT INFRASTRUCTURE"?
So far I have had two different approaches:
1) I could do the following: if my current request is complete, the working method can check if there is a raw request object in the collection and process it. It's simple, no events are provided.
2) Or something else: if the working method is triggered due to the "add" event and sees that there is already a current request, I could implement something like: "I cannot adequately respond to this add event, I put you back. Try starting yourself again in 200 milliseconds, maybe I have time. "
Maybe someone already had a similar problem and had a very good solution for this?
source to share
I think a good approach to this problem would be to inject a "next" event that is fired on the queue. Every time a "full" event is fired, it should fire the next event in the queue, which will then see if there are any pending requests and if it picks one according to your logic (I am assuming FIFO)
source to share
If I understand you correctly, do you want to request chaining or other asynchronous events? Then the promises pattern is a neat solution.
JQuery already implements it with Deferred Object .
As of jQuery 1.8+, the query chaining can be as simple as:
$.ajax(...).then(
function() {
return $.ajax(...);
}
).then(
function() {
return $.ajax(...);
}
);
But you can also build a more dynamic and complex architecture around it. For example, you can implement your queue so that it always retains the last unresolved promise so that you can attach new handlers to it while they are already active.
General example:
var Queue = function() {
// start with resolved promise
var promise = $.Deferred().resolve();
this.add = function(handler) {
// chain and replace latest with next promise
promise = promise.then(function() {
var deferred = $.Deferred();
handler(deferred);
return deferred;
}).promise();
}
};
var q = new Queue();
q.add(function(deferred) {
setTimeout(function() { alert('handler 1'); deferred.resolve(); }, 1000);
});
q.add(function(deferred) {
setTimeout(function() { alert('handler 2'); deferred.resolve(); }, 1000);
});
Here, handlers receive the deferred object as a parameter and are responsible for resolving (or rejecting) it if "done". Another, more flexible, possibility is that the handlers have to create the deferred object themselves and return their promise, so you can also use other promises like the ones returned by $ .ajax
source to share