前端开发笔记3-开发小项目，kline遇到的知识点及问题

1.遇到需要弹出某些信息时的思路

今天遇到的需求是触发一个点击事件后弹出对应的信息，如何弹出较为合理的信息框呢。

整体思路是点击事件-$('body').append('<div>.......</div>')-点击事件x-$('div').remove()

具体来讲是这样：

在index.html中设置一个空白的div作为容器
当点击事件触发后，js在空白div中创建一个相对浏览器100%的画布
在画布之内创建更加具体的信息内容

 $("body").prepend('<div class="userdatabox" ><div>' +'<img class = "img" src = "img/x.png"></div>' +'<div  class = "userdata" ><table id="alertbox" width="100%"  border="1" cellpadding="10" cellspacing="0" align="center"></table></div ></div>')for (var i = 0; i < data.length; i++) {$("#alertbox").append('<tr class = "content" align="center">' +"<td>" + data[i][0] + "</td>" +"<td>" + data[i][1] + "</td>" +"<td>" + data[i][2] + "</td>" +"<td>" + data[i][3] + "</td>" +"<td>" + data[i][4] + "</td>" +"<td>" + data[i][5] + "</td>" +"<td>" + data[i][6] + "</td>" +"<td>" + data[i][7] + "</td>" +"<td>" + data[i][8] + "</td>" +"<td>" + data[i][9] + "</td>" +"<td>" + returnTransactionStatus(data[i][10]) + "</td>" +"<td>" + returnTransactionType(data[i][12]) + "</td>" +"</tr>");}$('.img').click(function () {$("body .userdatabox").remove()})

2.获取数组中的所有key值

在我们使用键值对类型的数组时，难免会需要获取数组的所有key值。

js给我们提供了一个非常方便的命令，可以直接将所有key放入一个数组内供大家使用。

userKey = Object.keys(UserTimeDataByQuotesSort)

3.将代码上传到服务器后刷新页面没有改变

有的时候我们会遇到这种情况，将改好的页面上传到服务器，使用服务器的ip地址进行访问，明明代码已经改好并在本机测试没问题，可通过服务器访问的页面还是没有改变。

这种情况下不要着急，我们强制刷新（ctrl+f5）一下页面，便可以看到修改后的页面。奈斯。

4.当loading遇到异步，如何在合适的时间取消动画

通过setTimeOut来实现

function getPageData() {$('#main').css({ opacity: .5 });$('.loading-spinner').show()setTimeout(function(){dataUpdate();if (loadingTime >4){$('.loading-spinner').hide()$('#main').css({ opacity: 1 });}}}, 200);
};

代码我已经简化过了，由于dataUpdate里面存在异步操作，使用setTimeout停顿一点时间就好，让dataUPdate有时间执行代码。

后面的判断是用来指定合适的时间隐藏动画，当dataUpdate里面的多个异步执行完成后，loadingTime会+1，也就是说，当异步全部执行完成后，loadingTime肯定会大于4，由此确定隐藏动画的时间。

5.myEcharts.on()内的数组对象会保留list记录

起初遇到这个问题的时候很奇怪，当我每一次触发事件后，list都会初始化为空，使用的方式是 list = {}, 单步调试时发现list内容确实已经改变，问题在于myEcharts.on()这个echarts自带的函数，通过单步调试发现，myEcharts.on（）里面的list数据没有清空，反而是新旧数据都存在其内

    myChart.on('click', function (params) {userTimeData(UserTimeDataByQuotesSort[params.name]);})

这里用到的UserTimeDataByQuotesSort数组对象是问中所提list，该数组对象为局部类型，理论上UserTimeDataByQuotesSort不会保留之前的数据，因为会被初始化掉。

但是myChart.on()确实是保留住之前的数据了，这里面肯定有什么原因，不过没有时间细究，只是得到一个解决方法。

加载数据事件发生后，首先清空list内的全部数据，再向其内存放数据

    for(let key in UserTimeDataByQuotesSort) {delete UserTimeDataByQuotesSort[key]}