近期问题: jq循环中异步请求问题
时间:2022-07-23
本文章向大家介绍近期问题: jq循环中异步请求问题,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
问题1:
今天开发遇到了一个问题, 页面中的列表是通过循环ajax进行请求的,最后需要对请求结束的数据进行判断和统计,所以就存在异步问题,当然不用ES6, 一开始想的是用 async:false, 使用后发现,卡屏... 看到有个$.when(), 也不适用,不可能每个ajax都搞个变量... 请求代码如下:
nodeList.forEach(function(val) {
$.ajax({
...
})
})
解决: 由于知道列表的总数, 所以我就设置了个计数器,每进入一个ajax请求结束加一,最后判断到了列表总数一样的时候, 进行统计显示结果
问题2:
数组遍历ajax中,每次请求都会获取一个ip数组,例如
ip数组
需要对这些ip进行前端显示,以及计数,即不存在的ip就显示到表格里,存在的ip计数加一
解决: 先写好生成表格的函数 当然那个生成空表格的,也可以使用以下的方法
new Array(3).fill('<td>-</td><td>-</td>').join('')
但是, IE不兼容
Array.prototype.fill不兼容IE
function createIpList(obj) {
$('#ip-table-tbody').html('')
var temp = 0
var length = Object.keys(obj).length
var blank = '' // 空表格
if(length === 0) {
blank += '<td>-</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td>'
}
if(length % 3 > 0) {
for (var i = 0;i < 3-length % 3 ; i++) {
blank += '<td></td><td></td>'
}
}
var tr = '<tr>'
for ( v in obj ) {
if(temp === 0) {
tr += '<tr><td>'+ v + '</td>' +
'<td>' + obj[v] + '</td>'
}
else if(temp === 3) {
temp = 0
tr += '</tr><tr><td>'+ v + '</td>' +
'<td>' + obj[v] + '</td>'
} else {
tr += '<td>'+ v + '</td>' +
'<td>' + obj[v] + '</td>'
}
temp++
}
$('#ip-table-tbody').append(tr+blank)
}
效果
随后,我们在遍历ajax中,将数组取出存入以ip为键,ip数量为值的对象中,然后将对象带入生成表格函数即可实时更新
// 这些都包裹在ajax的success中
... ...
ipList = []
ipList = ipList.concat(ret.data.ips)
ipList.forEach(function(val) {
if(ipObj.hasOwnProperty(val)) { // 判断是否存在该ip, 如果存在就计数加一
ipObj[val]++
} else { // 不存在就创建键, 并初始化为1
ipObj[val] = 1
}
})
createIpList(ipObj)
... ...
- Android实现滑动刻度尺效果,选择身高体重和生日
- 浅谈开源web程序后台的安全性
- Web漏洞演练平台 – ZVulDrill
- Android内存泄漏终极解决篇(上)
- 走近科学:我是如何入侵Instagram查看你的私人片片的
- 在线手写识别的多卷积神经网络方法
- 苹果发布OS X 10.9.2更新,修复SSL漏洞
- Android内存泄漏终极解决篇(下)
- 利用Volatility查找系统中的恶意DLL
- 雪人行动:利用IE10 0day漏洞的APT攻击剑指美国军方情报
- Android开发:最详细的 Toolbar 开发实践总结
- 关于yubikey对web应用的杞人之忧
- 利用旧版Android漏洞的E-Z-2-Use攻击代码已在Metasploit发布
- Android Studio你不知道的调试技巧
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- CF--思维练习--CodeForces - 221C-H - Little Elephant and Problem (思维)
- CF--思维练习--CodeForces - 219C Color Stripe (思维)
- 疯子的算法总结(六) 简单排序总 选择排序+插入排序+比较排序+冒泡排序
- C语言基础知识总结
- CF思维联系--CodeForces - 218C E - Ice Skating (并查集)
- 数组及字符串相关知识
- C++循环结构
- C++条件分支结构
- USACO Training Section 1.1 贪婪的送礼者Greedy Gift Givers
- 数学--数论--HDU--5878 Count Two Three 2016 ACM/ICPC Asia Regional Qingdao Online 1001
- ACM-ICPC 2019 山东省省赛D Game on a Graph
- 数学--数论--HDU6919 Senior PanⅡ【2017多校第九场】
- 数学--数论--Alice and Bob (CodeForces - 346A )推导
- ACM-ICPC 2019 山东省省赛 M Sekiro
- 数学--数论--HDU2136 Largest prime factor 线性筛法变形