【发布时间】：2013-09-17 21:04:31
【问题描述】：
我在 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
- 电传打字机（我 - 用于在 div 中输入文本）
- yodaProgress（我 - 图形进度条。具有 .progress(step 0.00 - 1.00) 和 .isDone() 函数）
- q v. 0.9.6 / q v. 0.9.7
HTML：
<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.
*/
附：当我稍后在 Chrome 中加载页面并打开控制台时，我得到一个可以检查的 TypeError 对象，它显示“对象没有'when()'方法。”这给了我从哪里开始的线索。在此之前，如果在加载页面之前在 Chrome 中打开控制台，它只会显示“TypeError {}”消息。必须更多地研究为什么在操作上有如此巨大的差异。
非常感谢！
【问题讨论】：
标签： javascript promise deferred q