【BUG解决方案】jQuery数组中包含数据，但通过 .length 获得的数组长度始终为0

已于 2023-01-15 14:07:47 修改
阅读量984 收藏
点赞数 1
分类专栏： BUG解决方案 文章标签： jquery bug javascript
于 2023-01-09 15:52:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45953673/article/details/128615692
版权

0. BUG展示

var lels = [];
for (var i = 0; i < maxDevNums + 1; i++) {
    lels.push([]);
}
$.ajax({
    type : "post",
    async : true,
    url : "/sc/comb/history/data",
    data : {},
    dataType : "json",
    success : function (result) {
        if (result) {
            for (let i = 0; i < result.length; i++) {
                lels[result[i].combDevId].push(result[i].combLel);
            }
            console.log(lels);
        }
        console.log("在ajax请求中获取数组长度：" + lels[1].length)
    },
    error : function(errorMsg) {
        alert("图表请求数据失败");
    }
})

console.log("在ajax请求外获取数组长度：" + lels[1].length);

for (let i = 1; i < lels.length; i++) {
    var gaugeChart = echarts.init(document.getElementById("echarts-gauge-chart" + i));
    if (lels[i].length > 0) {
        var lel = lels[i][lels[i].length - 1];
        gaugeOption.series[0].data = [{value: lel, name: 'lel'}]
    } else {
        gaugeOption.series[0].data = [{value: 0, name: 'offline'}]
    }
    gaugeChart.setOption(gaugeOption);
    $(window).resize(gaugeChart.resize);
}

在这里插入图片描述
在这里插入图片描述

1. 原因分析

ajax默认是异步（async : true），代码第25行打印数组lel长度时，接口数据未返回，所以数组lel长度为0

2. 解决方案

将async : true修改为async : false，即异步改为同步。因为是同步请求，所以在打印时接口数据已返回，所以数组lel长度为其实际长度4。

var lels = [];
for (var i = 0; i < maxDevNums + 1; i++) {
    lels.push([]);
}
$.ajax({
    type : "post",
    async : false,
    url : "/sc/comb/history/data",
    data : {},
    dataType : "json",
    success : function (result) {
        if (result) {
            for (let i = 0; i < result.length; i++) {
                lels[result[i].combDevId].push(result[i].combLel);
            }
            console.log(lels);
        }
        console.log("在ajax请求中获取数组长度：" + lels[1].length)
    },
    error : function(errorMsg) {
        alert("图表请求数据失败");
    }
})

console.log("在ajax请求外获取数组长度：" + lels[1].length);

for (let i = 1; i < lels.length; i++) {
    var gaugeChart = echarts.init(document.getElementById("echarts-gauge-chart" + i));
    if (lels[i].length > 0) {
        var lel = lels[i][lels[i].length - 1];
        gaugeOption.series[0].data = [{value: lel, name: 'lel'}]
    } else {
        gaugeOption.series[0].data = [{value: 0, name: 'offline'}]
    }
    gaugeChart.setOption(gaugeOption);
    $(window).resize(gaugeChart.resize);
}

在这里插入图片描述
在这里插入图片描述

3. 附：页面完整代码

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('百度ECharts')" />
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>设备1</h5>
                    <!--<div class="ibox-tools">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        &lt;!&ndash;<ul class="dropdown-menu dropdown-user">
                            <li><a href="#">查看当前设备详细信息</a></li>
                            &lt;!&ndash;<li><a href="#">查看历史可燃气体浓度</a></li>&ndash;&gt;
                            <li><a href="javascript:void(0)" οnclick="$.modal.open('历史可燃气体浓度', '/sc/map/comb-history');">查看历史可燃气体浓度</a></li>
                        </ul>&ndash;&gt;
                    </div>-->
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-gauge-chart1"></div>
                    <div align="right"><button type="button" class="btn btn-success btn-sm" href="javascript:void(0)" onclick="$.modal.open('历史可燃气体浓度', '/sc/comb/history');">历史可燃气体浓度与设备信息</button></div>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>设备2</h5>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-gauge-chart2"></div>
                    <div align="right"><button type="button" class="btn btn-success btn-sm" href="javascript:void(0)" onclick="$.modal.open('历史可燃气体浓度', '/sc/comb/history');">历史可燃气体浓度与设备信息</button></div>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>设备3</h5>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-gauge-chart3"></div>
                    <div align="right"><button type="button" class="btn btn-success btn-sm" href="javascript:void(0)" onclick="$.modal.open('历史可燃气体浓度', '/sc/comb/history');">历史可燃气体浓度与设备信息</button></div>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>设备4</h5>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-gauge-chart4"></div>
                    <div align="right"><button type="button" class="btn btn-success btn-sm" href="javascript:void(0)" onclick="$.modal.open('历史可燃气体浓度', '/sc/comb/history');">历史可燃气体浓度与设备信息</button></div>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>设备5</h5>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-gauge-chart5"></div>
                    <div align="right"><button type="button" class="btn btn-success btn-sm" href="javascript:void(0)" onclick="$.modal.open('历史可燃气体浓度', '/sc/comb/history');">历史可燃气体浓度与设备信息</button></div>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>设备6</h5>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-gauge-chart6"></div>
                    <div align="right"><button type="button" class="btn btn-success btn-sm" href="javascript:void(0)" onclick="$.modal.open('历史可燃气体浓度', '/sc/comb/history');">历史可燃气体浓度与设备信息</button></div>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>设备7</h5>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-gauge-chart7"></div>
                    <div align="right"><button type="button" class="btn btn-success btn-sm" href="javascript:void(0)" onclick="$.modal.open('历史可燃气体浓度', '/sc/comb/history');">历史可燃气体浓度与设备信息</button></div>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>设备8</h5>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-gauge-chart8"></div>
                    <div align="right"><button type="button" class="btn btn-success btn-sm" href="javascript:void(0)" onclick="$.modal.open('历史可燃气体浓度', '/sc/comb/history');">历史可燃气体浓度与设备信息</button></div>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>设备9</h5>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-gauge-chart9"></div>
                    <div align="right"><button type="button" class="btn btn-success btn-sm" href="javascript:void(0)" onclick="$.modal.open('历史可燃气体浓度', '/sc/comb/history');">历史可燃气体浓度与设备信息</button></div>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>设备10</h5>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-gauge-chart10"></div>
                    <div align="right"><button type="button" class="btn btn-success btn-sm" href="javascript:void(0)" onclick="$.modal.open('历史可燃气体浓度', '/sc/comb/history');">历史可燃气体浓度与设备信息</button></div>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>设备11</h5>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-gauge-chart11"></div>
                    <div align="right"><button type="button" class="btn btn-success btn-sm" href="javascript:void(0)" onclick="$.modal.open('历史可燃气体浓度', '/sc/comb/history');">历史可燃气体浓度与设备信息</button></div>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>设备12</h5>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-gauge-chart12"></div>
                    <div align="right"><button type="button" class="btn btn-success btn-sm" href="javascript:void(0)" onclick="$.modal.open('历史可燃气体浓度', '/sc/comb/history');">历史可燃气体浓度与设备信息</button></div>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script type="text/javascript">
    $(function () {
        var maxDevNums = 12;

        var gaugeData = [{value: 98, name: 'lel'}]

        var gaugeOption = {
            /*title : {
                text: '运行状态: '
            },*/
            tooltip : {
                formatter: "{a} <br/>{c} {b}"
            },
            /*toolbox: {
                show : true,
                feature : {
                    dataView : {show: true, readOnly: false},
                    mark : {show: true},
                    /!*restore : {show: true},
                    saveAsImage : {show: true}*!/
                }
            },*/
            series : [
                {
                    name:'浓度',
                    type:'gauge',
                    min:0,
                    max:100,
                    splitNumber:10,
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            width: 10
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length :15,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: 'auto'
                        }
                    },
                    splitLine: {           // 分隔线
                        length :20,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            color: 'auto'
                        }
                    },
                    title : {
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontWeight: 'bolder',
                            fontSize: 20,
                            fontStyle: 'italic'
                        }
                    },
                    detail : {
                        fontSize: 20,
                        formatter: '{value}%',
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontWeight: 'bolder'
                        }
                    },
                    data: gaugeData
                }
            ]
        };

        var lels = [];
        for (var i = 0; i < maxDevNums + 1; i++) {
            lels.push([]);
        }
        $.ajax({
            type : "post",
            async : false,
            url : "/sc/comb/history/data",
            data : {},
            dataType : "json",
            success : function (result) {
                if (result) {
                    for (let i = 0; i < result.length; i++) {
                        lels[result[i].combDevId].push(result[i].combLel);
                    }
                    console.log(lels);
                }
                console.log("在ajax请求中获取数组长度：" + lels[1].length)
            },
            error : function(errorMsg) {
                alert("图表请求数据失败");
            }
        })

        console.log("在ajax请求外获取数组长度：" + lels[1].length);

        for (let i = 1; i < lels.length; i++) {
            var gaugeChart = echarts.init(document.getElementById("echarts-gauge-chart" + i));
            if (lels[i].length > 0) {
                var lel = lels[i][lels[i].length - 1];
                gaugeOption.series[0].data = [{value: lel, name: 'lel'}]
            } else {
                gaugeOption.series[0].data = [{value: 0, name: 'offline'}]
            }
            gaugeChart.setOption(gaugeOption);
            $(window).resize(gaugeChart.resize);
        }
    });
</script>
</body>
</html>
枯木何日可逢春
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
小程序开发使用weui无效解决方法，<swiper>标签中传入多个数组型数据 ... .
03-29
一：公众号及小程序开发使用weui无效解决方法   分享者：lijie627239856，原文地址  在开发微信公众号过程中,对于不熟悉前端的童鞋们来说,  明明引用了css文件,可以就是没有实际效果,瞬间懵逼  其实这个是微信官方文档weui中的BUG,给出的类名全部是以下这种形式   <a>按钮</a> 实际上,应该是这样的!   <a>按钮</a> 注意:类名中的
jQ常见数组问题
weixin_34284188的博客
02-18 492
jQuery 判断是否包含在数组中 jQuery.inArray()： vararr=["xml","html","css","js"]; $.inArray("js",arr); //返回 3, 如果不包含在数组中,则返回 -1; 在前提不知道bb在这个数组的下标，删除bb这个元素 var arrList = ['aa','bb','cc','dd'...
解决js array的key不为数字时获取长度的问题
weixin_30312563的博客
04-28 377
最近写js时碰到了当数组key不为数字时，获取数组的长度为0 的情况。 1、问题场景 vararr=newArray();arr[‘s1‘]=1001;console.log(arr.length); 通过chrome查看： 2、原因分析 js Array只支持数字索引，若指定的key为非数字索引，那么length为0. 另外，若key为数字索引，lengt...
JS调试时返回结果有内容却显示数组长度为0或对象内容为空
weixin_30918633的博客
07-07 4750
原因：异步问题 解决方法：在Ajax/axios请求中 async设置为false 转载于:https://www.cnblogs.com/marvelousone/p/11147546.html
报错：数组明明有内容但打印的length是0，学会使用 async 和 await 解决问题
虎康的博客
09-06 1537
因为我们拼接的数据是从接口请求的，而接口请求发送的ajax请求是异步的，因此遇到这种情况，基本上都是一点，你的数组数据来源是异步请求产生的（例如 ajax/axios ），就比如你在ajax的success回调中没有直接使用这个数据，而是赋予了一个全局变量，你此时在ajax的下方打印这个全局变量，便会出现上面的数组有值而长度为0的状况。那个时候的数组长度确实还是0。但这个数组包含修改后的数据。
JavaScript数组有值，但是长度为0
Saltimbanque的博客
12-18 1万+
JavaScript数组有值，但是长度为0 代码 打印如图 原因 遇到这种情况，基本上都是一点，你的数组数据来源是异步请求产生的（例如 ajax/axios ），就比如你在ajax的success回调中没有直接使用这个数据，而是赋予了一个全局变量，你此时在ajax的下方打印这个全局变量，便会出现上面的数组有值而长度为0的状况，如图 如此现象呢就是因为你的异步请求还在请求过程中，但是你的代码已经...
向数组中添加数据但length打印为0?
热门推荐
zm_miner的博客
11-08 1万+
最近写项目时, 遇到了一个问题, 我明明 向数组中push了数据, 但是打印的时候为[]数组, 并且其长度为0 看代码 先来看这种情况 很正常对吧, 往数组中push一组数据, 长度为1 往下看 static propTypes = { } constructor() { super(); this.state = { arr: [], ...
js数组有数据但是数组长度为0
陈新科的博客
01-21 7186
onMarkerMap(d) { var objString = JSON.stringify(d); var datas = JSON.parse(objString); console.log(datas,'datas'); }
打印 js数组有数据 但是数组长度为0
AAAXiaoApple的博客
02-03 2051
数组内容能打印出来，但是打印数组的长度length 时还是 0。
【Leetcode刷题笔记02】977.有序数组的平方 209.长度最小的子数组 59.螺旋矩阵II.md
01-13
内容概要:本文包含三道LeetCode算法题的刷题笔记,分别是977.有序数组的平方、209.长度最小的子数组和59.螺旋矩阵II,记录了详细的题目解析思路以及Java语言的参考代码。 适合人群:学习算法和数据结构的程序员或学生...
.net 中按.(点)无法智能提示的bug解决方案
01-02
问题描述： IDE按“.”无法智能提示，但是可以...支持版本提示,支持1.6apidreamweaver 安装Jquery智能提示自制基于jQuery的智能提示插件一枚jQuery在vs2008及js文件中的无智能提示的解决方法页面版文本框智能提示JS代码
jquery checkbox 勾选的bug问题解决方案与分析
11-30
在做项目的时候遇到个jQuery checkbok复选框的选中取消的BUG，咨询了大神，才闹明白怎么回事，这里记录下来，分析给大家。 先上代码： 代码如下: <form>  你爱好的运动是？<input type=”checkbox” id=...
leetcode04_寻找两个正序数组的中位数解法.rar
07-10
leetcode04_寻找两个正序数组的中位数解法.rar !!!CSDN的一个特性: 即使我设置成免费下载,被下载的次数多了之后也会变成付C币下载的了,这个很头疼. !!!因此如果没有C币但想要下载的朋友可以在b站视频下留言给我,留下...
【bug已解决】发生错误，导致虚拟 CPU 进入关闭状态。如果虚拟机外部发生此错误，则可能已导致物理计算机重新启动......
一键难忘的博客
04-28 260
这篇文章主要讨论了在使用 VMware 安装 Ubuntu 过程中可能遇到的虚拟 CPU 关闭状态的问题，并提供了多种解决方案。问题描述在安装 Ubuntu 时，可能会出现虚拟 CPU 关闭的错误，导致虚拟机无法正常运行。错误信息指出可能的原因包括虚拟机配置错误、操作系统错误或者 VMware Workstation 问题。原因分析主要原因是 VMware 版本与 Ubuntu 版本不匹配，即虚拟机的版本与虚拟机软件的版本不兼容。解决方案。
修复所有 bug 并不能解决所有问题
阿然的专栏
04-25 546
即使修复软件中所有的 bug，也并不能解决系统设计与实现的问题，系统问题需要同样的热情。
报错“Install Js dependencies failed”【鸿蒙开发Bug已解决】
一键难忘的博客
04-30 136
报错“Install Js dependencies failed”【鸿蒙开发Bug已解决】最近也是遇到了这个问题，看到网上也有人在询问这个问题，本文总结了自己和其他人的解决经验，解决了【报错“Install Js dependencies failed”】的问题。
发现问题并进行管理——bug和调试器
2301_81968528的博客
04-28 319
用于帮助查找程序中的bug的软件被称为调试器。它不是连贯执行创建好的程序，而是提供了在指定位置暂时停止处理，一行一行地执行，并显示代入变量中的值等功能。我们将程序中无法按照预期执行动作的现象称为bug。这不仅包括在编写源代码时输入的实时的bug，也包括在原本设计阶段就存在的设计时的bug，找到bug后，首先需要对其进行修正，但是作为管理者，需要考虑bug的数量和处理的优先顺序。去除bug，对程序进行修正使其可以正确执行动作的操作称为调试。有时，会将查找bug的操作也包含在内，统称为调试。
mmdetection3.1.0 bug（已解决）
struggle_success的博客
04-25 436
解决bug
DevEco安装后卡死解决方案【鸿蒙开发Bug已解决】
最新发布
一键难忘的博客
04-30 124
DevEco安装后卡死解决方案【鸿蒙开发Bug已解决】最近也是遇到了这个问题，看到网上也有人在询问这个问题，本文总结了自己和其他人的解决经验，解决了【DevEco安装后卡死解决方案】的问题。
我需要python来计算数组中表示存在的数据，true为存在
03-20
可以使用Python中的count()函数来计算数组中表示存在的数据，即True的数量。示例代码如下： ``` my_list = [True, False, True, True, False, True] count_true = my_list.count(True) print(count_true) ``` 输出结果为：4 这段代码会输出数组中True的数量，即4。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

枯木何日可逢春

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值