近期问题: jq循环中异步请求问题

治电小白菜

发布于 2020-08-25 15:22:55

1K0

发布于 2020-08-25 15:22:55

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

tcp/ip