问题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)
... ...
