#### 1. 问题如下
今天别人的项目遇到一个问题,有一个数字滚动组件,强刷界面时候数字错位。
滚动组件实现是将获取到的数字拆分,每一个数字为一列,都由0到9还有一个.组合数字滚动到需要的数字。
然后发现强刷界面列的值不对有时779,有时880.
#### 2. 解决思路
- 刚开始以为是 $().html() 绘制界面需要一段时间,然后紧跟着的获取高度时候还没绘制完成就出错了,然后就给他加了定时器,100毫秒后执行 html() 后的操作。然后也成功了。。。
- 后来想想不对, html() 没有异步操作,js单线程,一定是按顺序执行,html()后面肯定可以正常获取生成的元素的高度。
- 然后调试时候发现高度有两种情况779和880。
- 然后查看了样式,没一列一共11个,每个定义的行高为80,那正常应该是880才对,为什么779正常?那肯定是贝缩放了,然后查看缩放操作在哪里。
- 原来整个窗口外部设置了缩放,实现全屏,然后去查找缩放在,初始缩放在window.onload 里面调用。那应该就是缩放执行时机有问题了。
- log一下,发现确实,有时候缩放在 ajax 获取到数据然后 html() 之前,大多数在之后。
- 然后查找了一下文档,window.onload 是在所有资源加载完成之后。
- 那么就可以得出结论:在 window.onload 时候,ajax 请求有可能已经完成,然后 html() 重绘界面后由于缩放并没有执行,这是获取的高度并不是需要的高度。
- 然后查找了一下 jQuery(用到就是jQuery)里面的$().ready() $(function()) 是在界面界面中的DOM结构完成时候执行,刚好可以使用,然后将缩放操作放到这里,欧了。