我正在使用JavaScript管理队列的页面。我的挑战是我的代码有嵌套回调。嵌套的回调让我对队列的范围感到困惑。目前,我有以下内容:
function MyApp() {}
module.exports = MyApp;
MyApp.myQueue = [];
MyApp.queueIsLocked = false;
MyApp.enqueue = function(item, onSuccess, onFailure) {
if (!MyApp.queueIsLocked) {
MyApp.queueIsLocked = true;
MyApp.myQueue.push(item);
MyApp.queueIsLocked = false;
item.send(
function() {
console.log('item: ' + item.id);
MyApp.queueIsLocked = true;
MyApp.findItemById(item.id,
function(index) {
if (index !== -1) {
MyApp.myQueue.splice(index, 1);
MyApp.queueIsLocked = false;
if (onSuccess) {
onSuccess(item.id);
}
}
}
);
},
function() {
alert('Unable to send item to the server.');
if (onFailure) {
onFailure();
}
}
);
}
};
MyApp.findItemById = function(id, onComplete) {
var index = -1;
if (MyApp.queueIsLocked) {
setTimeout(function() {
// Attempt to find the index again.
}, 100);
} else {
MyApp.queueIsLocked = true;
for (var i=0; i<MyApp.myQueue.length; i++) {
if (MyApp.myQueue[i].id === id) {
index = i;
break;
}
}
}
if (onComplete) {
onComplete(index);
}
};
根据send
的详细信息,item
函数的行为会有所不同。有时该项目将被发送到一台服务器。有时,它会被发送到多个服务器。无论哪种方式,我不知道什么时候该项目将被“发送”。出于这个原因,我正在使用回调来管理队列。当项目完成“发送”时,我想将其从队列中删除。我需要使用超时或间隔来检查队列是否被锁定。如果它未锁定,我想从队列中删除该项目。这项检查增加了另一层嵌套,令我感到困惑。
我的挑战是,我不相信索引的范围像我预期的那样工作。我觉得我得到了比赛条件。我的理由是我写了下面的Jasmine测试:
describe('Queue', function() {
describe('Approach 1', function() {
it('should do something', function() {
MyApp.enqueue({id:'QRA', text:'Test A'});
});
});
describe('Approach 2', function() {
it('should successfully queue and dequeue items', function() {
MyApp.enqueue({id:'WX1', text:'Test 1'});
MyApp.enqueue({id:'QV2', text:'Test 2'});
MyApp.enqueue({id:'ZE3', text:'Test 3'});
});
});
});
当我执行测试时,我在控制台窗口中看到以下内容:
item: QRA index: 1
item: WX1 index: 2
item: QV2 index: 3
item: ZE3 index: 4
它就像物品没有像我期望的那样出类拔萃。在我管理队列的方法中,我是否会偏离基础?我做错了什么?
感谢您的帮助。
答案 0 :(得分:10)
以下是您需要思考并回答自己的意图和设计的一些问题:
您似乎并不真正想要/需要一个队列本身,因为您希望列表能够跟踪正在发送的项目。 &#34;队列&#34;意味着正在以某种FIFO顺序处理对象。
如果您只想根据ID跟踪项目,则可以使用对象。例如:
MyApp.items = {};
MyApp.addItem = function(item){
MyApp.items[item.id] = item;
item.send(
function(){ // success
MyApp.removeItem(item.id)
}
);
}
MyApp.removeItem = function(id){
delete MyApp.items[id];
onSuccess(id);
}
另外,我认为你不需要锁定队列。 Javascript是单线程的,因此您永远不会遇到代码的两个部分同时尝试在队列上运行的情况。当ajax调用异步完成时,您的回调代码实际上不会执行,直到当前正在执行的任何其他代码完成。
答案 1 :(得分:3)
我发现的一个重大缺陷是你在MyApp.queueIsLocked = true
之前立即致电MyApp.findItemById
。因为它已被锁定,所以该函数设置超时(不执行任何操作),然后继续调用onComplete(-1)
。然后-1
显式忽略onComplete
,无法出列队列并锁定队列。
您可能打算重试查找,如下所示:
setTimeout(function() {
// Attempt to find the index again.
MyApp.findItemById(id, onComplete);
}, 100);
我不确定,但我认为Jasmine需要明确的指示才能使用jasmine.clock().tick
那就是说,我建议删除所有对queueIsLocked
的引用,包括上面的超时代码。此外,如果item.id
始终是唯一字符串,则可以使用对象而不是数组来存储值。
这是一个建议的迭代,尽可能保持原始API:
function MyApp() {}
module.exports = MyApp;
MyApp.myQueue = {};
//Sends the item, calling onSuccess or onFailure when finished
// item will appear in MyApp.myQueue while waiting for a response from send
MyApp.enqueue = function(item, onSuccess, onFailure) {
MyApp.myQueue[item.id] = item;
item.send(function() {
console.log('item: ' + item.id);
delete MyApp.myQueue[item.id];
if (onSuccess) {
onSuccess(item.id);
}
}, function() {
alert('Unable to send item to the server.');
if (onFailure) {
onFailure();
}
});
};
//Returns the Item in the queue, or undefined if not found
MyApp.findItemById = function(id, onComplete) {
if (onComplete) {
onComplete(id);
}
return MyApp.myQueue[id];
};
答案 2 :(得分:2)
尝试使用ECMA 6 Promise或来自js framework.Promiseis的任何承诺更适合此任务。在https://developer.mozilla.org/
了解详情function MyApp() {}
module.exports = MyApp;
MyApp.myQueue = [];
MyApp.queueIsLocked = false;
MyApp.enqueue = function(item) {
return new Promise(function(resolve, reject) {
if (!MyApp.queueIsLocked) {
MyApp.queueIsLocked = true;
MyApp.myQueue.push(item);
MyApp.queueIsLocked = false;
var onResolve = function() {
console.log('item: ' + item.id);
MyApp.queueIsLocked = true;
MyApp.findItemById(item.id).then(function(index){
if (index !== -1) {
MyApp.myQueue.splice(index, 1);
MyApp.queueIsLocked = false;
resolve(item.id);
}
});
};
item.send(onResolve,reject);
}
});
};
MyApp.findItemById = function(id) {
return new Promise(function(resolve, reject) {
var index = -1;
if (MyApp.queueIsLocked) {
setTimeout(function() {
// Attempt to find the index again.
}, 100);
} else {
MyApp.queueIsLocked = true;
for (var i=0; i<MyApp.myQueue.length; i++) {
if (MyApp.myQueue[i].id === id) {
index = i;
break;
}
}
resolve(index);
}
});
};
答案 3 :(得分:0)
将MyApp.queueIsLocked = false;
移至服务器发送回调