脱机时对多个 AJAX 请求进行排队,在连接返回时发送
Queue multiple AJAX requests while offline, send when connection returns
我有一个 AJAX
密集型应用程序,需要快速或同时发送多个 AJAX 请求。以下代码只是一个简单的包装器,用于发送我在整个应用程序中使用的 AJAX POST 调用。有 2 个注意事项:
1)我希望能够在提出请求之前测试用户的互联网连接,以便在他们的连接中断时通知他们。
2)如果他们的连接断开并且他们继续使用该应用程序,这会生成更多的AJAX呼叫,我想将这些呼叫排队,并在连接恢复后逐个发送。
连接检查和排队是有效的,但是当用户重新联机时,只有他们的一些请求被发送到服务器,并且它们似乎被发送了原始顺序。我错过了什么?为什么没有发送所有请求,为什么它们没有按顺序发送?
在任何人注意到之前,我已经看到了一些涉及jQuery的主题的其他解决方案。我不反对使用这些,我只是想了解为什么这段代码不起作用。提前谢谢。
window.connectionState = true
window.xhrQueue = []
window.pingInterval
function xhrPost(url, packet, before, after) {
if (!url || typeof(url) !== "string") {
console.log("invalid url supplied in xhr call.")
return false
}
var mainRequest = function() {
var xhr= new XMLHttpRequest()
if (typeof(after) === "function") {
xhr.onreadystatechange = function(){
if (xhr.readyState == 4) {
after(xhr)
return true
}
}
}
if (typeof(before) === "function") {
before()
}
xhr.open("POST",url,true)
if (packet) {
xhr.send(JSON.stringify(packet))
}
else {
xhr.send()
}
}
ping(mainRequest)
}
function ping(mainRequest) {
// Create pingXhr to test connection
var pingXhr = new XMLHttpRequest()
pingXhr.onreadystatechange = function(){
// If pingXhr comes back successfully...
if (pingXhr.readyState == 4) {
if (pingXhr.status == 200) {
// If pingXhr comes back from being down, update user
if (window.connectionState !== true) {
setTimeout(function() { alert("And we're back! Your connection seems to be working now. Keep editing.") }, 1)
}
// If there are requests waiting, send them in order, then remove them
if (window.xhrQueue.length > 0) {
for (var i in window.xhrQueue) {
ping(window.xhrQueue[i])
window.xhrQueue.splice(i, 1)
clearInterval(window.pingInterval)
}
}
// Otherwise, just make the singular request
else {
mainRequest()
}
// Reset xhrQueue since stuff is successful, change connection to true, and unset onbeforeunload message
window.xhrQueue = []
window.connectionState = true
}
// If there was a problem with the request
else {
// Notify the user their internet is down
if (window.connectionState === true) {
setTimeout(function() { alert("It seems you have momentarily lost internet connectivity.") }, 1)
}
// If there are no requests in the xhrQueue, create the timeout. Otherwise, just add to the queue
if (window.xhrQueue.length === 0) {
window.pingInterval = setInterval(function(){ ping() }, 3000)
}
// Add the request to the xhrQueue to be processed in order
if (typeof(mainRequest) === "function") {
window.xhrQueue.push(mainRequest)
}
window.connectionState = false
}
}
}
pingXhr.open("GET","/some/url/here",true)
pingXhr.send()
}
看起来你正在使用 push() 将条目放在队列中,然后在循环中使用 splice() 来删除它们。这不太可能正常工作 - 它会跳过其中一些/大部分,因为当您迭代它们时,拼接会修改数组中的索引。
如果你把循环改为总是去掉第一个元素,它会更好地工作。
编辑添加:您可能也不想在这里进行输入循环。在迭代对象时修改对象的键通常不是一个好主意。
像这样:
while (window.xhrQueue.length > 0) {
ping(window.xhrQueue[0]);
window.xhrQueue.splice(0, 1);
}
或者,您可以让 onreadystatechange 处理程序从队列中获取下一个条目并发送该请求,而不是尝试同时运行所有排队的请求。
这是因为您一次将它们全部解雇,有些需要比其他的更长的时间才能恢复,因此它们的处理程序将首先运行。
我建议你使用回调一次发送一个来发送下一个
相关文章:
- 是否可以将一个函数输入连接到另一个函数调用的文本
- 如何使用密码检测网络中的状态连接
- 如何处理node.js节点mongodb中的连接和查询队列
- Rails-JQueryUIAutcomplete和AJAX不工作,可以't连接到数据库
- Twilio-显示所有连接参与者的远程参与者视频
- 操作放置在画布上的元素之间的连接
- TypeError:_this.store.getState在使用来自Redux的连接时不是函数
- 如何在 AJAX JQuQudy中对文件上传进行排队
- jQuery UI可排序-多连接列表拖动
- 如何使用offer/answer交换来自两个对等连接的流
- 在Qualtrics中,介绍如何动态连接两个滑块
- 使用优化器在慢速连接上加载main.js时需要js超时
- 如果连接类型为none,则Javascript Function Only警报
- GTK百老汇支持同时连接
- 在node.js中写入ECONNRESET错误和套接字连接检查
- 如何将所有JS文件连接到一个文件夹中
- 在cordova android应用程序中连接数据库
- Node.js上的WebSocket,并在所有连接的客户端之间共享消息
- 脱机时对多个 AJAX 请求进行排队,在连接返回时发送
- jQuery.Get将请求排队,直到网络连接可用