JS代码运行延迟
还是上篇文章的项目。
现在是屏幕上需要显示九张图表,刚好用一张3X3的表格来显示。但是负责这块内容的同事始终没法让九张图表同时显示,有些图表的位置空了出来。
大家百思不得其解,最后只得求助技术经理。
经理过来了一会,发现问题了。
我们原来的结构是:
erp.init(..A..); //初始化内容是数据来源,还有图标位置 erp.getData(....); //获取数据,通过ajxa跨域访问接楼获得 erp.init(..B..); erp.getData(....); erp.init(..C..); erp.getData(....);
JS代码当然时从上到下解释,我们理所当然地认为他们会按照顺序一步步来运行、显示,可事实不是这样。在A图表初始化完成在获取数据时,很可能因为网络等问题,没有及时获得内容,程序就先跑到下一行去执行B图标的初始化;B初始化完成时,A图标的数据恰好获取好了,这时的A图表数据就不会放到A初始化时的位置, 而是放到B图表位置去了,A图表的位置就空了出来;这时B图表数据随即获取到,又放到B的位置,这样A表就被覆盖了。这就相当于是刻舟求剑,造成了上面的问题,让大家困惑许久。
解决方案很简单,就是初始化时不去设置显示的位置,等数据获取到的时候再指定。