我在短时间内使用q库，并且成功地处理了我以顺序方式从 ajax 获得的数据。
通过数据的顺序处理，我的意思是在每次 ajax 调用之后，我执行一组.then( function(){} )并继续进行下一个 ajax 调用...
作为处理单个数据条目（ajax 数据）的一部分，我必须在屏幕上输出 ajax 的结果。在将 ajax 数据中的文本输入 div 后，我有一个延迟对象，我正在通知（使用 Q 的progressHandler）我已完成将文本输入 div （100% 的文本已输入 div）。
在 q's v. 0.9.6 中，一切都按预期工作。但是由于某种原因，使用 v. 0.9.7 我得到一个 TypeError {} :s 显然，延迟对象不会传播进度并且由于某种原因失败。更改日志对我帮助不大：q changelog。
我准备了 2 个版本的代码，尽可能地简化它。这是有效的版本 - 0.9.6和无效的版本 - 0.9.7。两个例子都有相同的代码，唯一的区别是 q 库的版本。
我在 CSS 部分对代码进行了解释。我希望我在那里尽可能清楚。
如果这是一个愚蠢的问题，我提前道歉。
因为我不能只发布 JSFiddle 链接，所以这里是代码：
我使用的库：
- jQuery
- anas Nakawa 的 ajaxFake
- Teletype（我 - 用于在 div 中输入文本）
- yodaProgress（我 - 一个图形进度条。具有 .progress(step 0.00 - 1.00) 和 .isDone() 函数）
- q诉0.9.6 / q诉0.9.7
网页：
<div id="progress_1"></div>
Javascript：
$(document).ready(function() {
// For DEFERRED object (referencing in 2.2.1)
var mainObject = {
}
// For 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.");}
);
// 2.0 ONE OF 3 SEQUENTIALL ITEMS
function processAjaxCall () {
var fakeResult;
// 2.1. AN AJAX DATA
var promise = Q.when(
fakeAjax()
);
// 2.2. SETTING OF TEXT (from 2.1.) INTO DIV
var promiseToDo = promise.then(
function (result) {
console.log("Result of ajax call:", result);
return setText(result);
},
function (error) { console.log("Ajax call error 2.2:", error); },
function (progress) { console.log("Ajax call progress 2.2:", progress); }
);
// 2.3. SETTING OF PROGRESS (100% - color green for a DIV)
return promiseToDo.then(
function (result) {
console.log("Text was set 2.3");
},
function (error) {
console.log("Error 2.3:", error);
},
function (progress) {
var promiseElement = new YodaProgress(
$("#progress_1")
,{
doneCSSRule: {
'background-color': "#00CC00"
}
}
);
promiseElement.progress(parseFloat(progress).toFixed(2));
if (promiseElement.isDone()) {
mainObject.deferred.resolve();
}
//console.log("2.3 Progress %:", progress);
}
);
}
// 2.1.1 - a fake Ajax Data
// Anas Nakawa
// https://github.com/anasnakawa/jquery.ajax.fake
function fakeAjax () {
return $.ajax({
type:'GET',
dataType:'jsonp',
fake: true,
url:'blah'
});
}
// 2.2.1 - setting text into a DIV
function setText (result) {
console.log('Passing in result:', result);
console.log('About to set text to:', result.result);
mainObject.deferred = Q.defer();
promise = mainObject.deferred.promise.when(
// Teletype is a library to type text into a DOM element
// as if human was typing, sorta
Teletype(
document.getElementById("progress_1"),
result.result,
40,
true,
function (i, l) {
mainObject.deferred.notify(
parseFloat((i+1)/l).toFixed(2)
);
}
)
//,function(error) { console.log("This is an error 2.2.1", error); }
//,function(progress) { console.log("This is a progress 2.2.1", progress);}
);
console.log("RETURNING PROMISE");
return promise;
}
});
说明：
If it is v. 0.9.7 I GET a "TypeError {}" and div is typed in differently
If it is v. 0.9.6 it works as expected.
Code Explanation:
Forget the ugliness and everything.
This code is modified for illustrative purposes.
What this code does is basically this:
- Process 3 sequential function calls
- these calls turns out to consist of:
- an ajax Call
- setting div #progress_1 TEXT with ajaxCall response
- on progress of setting text into a #progress_1 div make DIV green.
*/
PS 当我稍后在 Chrome 中加载页面并打开控制台时，我得到一个可以检查的 TypeError 对象，它显示“对象没有'when()'方法。” 这给了我从哪里开始的线索。在此之前，如果在加载页面之前在 Chrome 中打开控制台，它只会显示“TypeError {}”消息。必须更多地研究为什么在操作上存在如此巨大的差异。
非常感谢！