My experience with the q library was successful in processing ajax data sequentially. Each ajax call is followed by a.then( function(){} ) to ensure proper sequencing.
During the processing of individual data entries, I display the ajax result on screen using a deferred object that notifies me when the text has been entered into a div (reaching 100% completion).
Everything worked smoothly with q v. 0.9.6 but encountered a TypeError {} issue with v. 0.9.7. It seems that the deferred object fails to propagate progress for some reason. The changelog didn't provide much insight: q changelog.
I have simplified and prepared two versions of the code, one working - 0.9.6, and the other not working - 0.9.7. Both examples share the same code, differing only in the version of the q library used.
Furthermore, I have provided details of the code in the CSS section for clarity.
If this question seems trivial, I apologize in advance.
Due to JSFiddle link restrictions, here is the code excerpt:
Libraries utilized:
- jQuery
- ajaxFake by ANas Nakawa
- Teletype (used for typing text into a div)
- yodaProgress (custom graphical progress bar with .progress(step 0.00 - 1.00) and .isDone() functions)
- q v. 0.9.6 / q v. 0.9.7
Html:
<div id="progress_1"></div>Javascript:
$(document).ready(function() {
// Declaration for DEFERRED object
var mainObject = {
}
// Fake ajax Data
$.ajax.fake.registerWebservice('blah', function (data) {
return {
result: 'My fake ajax result should be typed into the div!',
};
});
// 1. START
var nextTick = Q.when();
// 2. PROCESS 3 ITEMS SEQUENTIALLY
for (var i = 0, length = 3; i < length; i ++) {
nextTick = nextTick.then(
processAjaxCall,
function(error) { console.log("This is an error 2."); },
function(progress) { console.log("This is a progress 2."); }
);
}
// 3. FINALLY DO THIS
nextTick.fin(
function(result) { console.log("This is a final result 3."); },
function(error) { console.log("This is an error 3."); },
function(progress) { console.log("This is a progress 3.");}
);
// Function to process each item sequentially
function processAjaxCall () {
// Code implementation here
}
// Additional functions referenced
});
Explanation:
Explanation of the functional code.
Clarification of operation under different version scenarios.
Remember, the purpose of this code is illustrative.
P.S. Upon inspecting the TypeError object in Chrome, it indicates "Object has no 'when()' method," providing a starting point for further investigation. Prior to this insight, the message displayed was simply 'TypeError {}'. Understanding the significant operational differences requires additional research.
Thank you!