模糊搜索中遇到的坑

项目中遇到的问题

1. 拖拽性能问题

2. 排序问题，在 Safari 中排序不生效

3. Common.postRequest方法

4. gesture手势，pan，flick事件判定标准

5. 传递过程中需要传递hybridid

6. 事件传递的组织方式

问题的解决

拖拽性能问题

页面中要通过拖动时间点来确定出行的时间段，在拖动时，发现第一次拖拽dot时有明显的卡顿跳跃现象。查看chrome timeline工具，会发现有这样的提醒。

于是推断是因为在定位中使用position：absolute，通过改变left值来修改dot位置使得页面不停的reflow导致页面卡顿，于是将dot的定位方式修改为通过transform属性来改变位置，这样对页面其他部分不会产生影响。修改后页面中还是会有卡顿现象出现，timeline中依然会提示上面的信息。应该是因为在每次拖动改变时间段后对数据进行筛选再重新渲染的缘故。但是改为transform方式还是对性能有一定的提升。

继续查找卡顿的原因，发现只有在移动左侧dot 时，会有明显的跳跃现象。对left偏移值跟踪处理发现，在拖动时，left偏移值第一次变化大概会有20px左右，问题应该出在这里。仔细回想代码之后，发现是因为获取拖拽距离时，使用的了pageX属性。刚开始计算修改后的位置是计算pageX-gapLeft，由于不会计算拖拽开始时的位置，只是获取鼠标结束点的pageX再赋值给startDot，这样就会出现拖动开始第一次20px的跳跃，因为拖动的位置更偏向中间，而不是dot 点的最左侧。找到问题的原因后，使用clinetX判断起止点的位移差，这个值就是手指拖动时移动端真实距离。再修改后，跳跃问题确实有了很大的改观，但是仔细观察的话还是能发现有卡顿现象，这个是由于事件判定的原因导致的，后面会讲。

排序问题

为了使筛选出符合条件的车站排在最前面，对筛选出的数据进行了排序，但是只判断是否符合时间条件，会出现其他数据一直闪动的现象，因此我选择了对车次的出发时间进行二次判断，这样在被筛选出的车站不发生改变的情况下，其他车站的位置也不会发生变化。使用Array.sort()方法，对数组排序，由于是否在范围内使用boolean值进行判断，因此我判定相等时就直接返回了true/false。在chrome中，排序生效，但是在Safari中，排序无效，查阅相关资料发现，在Safari中，sort方法对boolean值类型的返回值无法进行处理。随后将返回值全部修改为正负值，成功解决了问题。

common.postRequest

由于后端接口是开放给客户端的，因此在页面中无法直接请求这种接口，必须要调用客户端请求服务器的方法才能进行，在QApp框架中，已经定义好了Common.postRequest方法，可以直接调用客户端中的插件。但是必须要在scheme链接中加上hybridid字段,必须是flight_bus_app/flight_ship_app才可以，否则无法调用客户端的方法，可以在测试版的应用上查看注册的插件都有哪些。

手势判定

判断是否为拖拽行为时，会判断持续时间有没有超过300ms，如果没有超过会判定为flick事件，因为pan事件开始的前300ms，事件并不会被触发，导致拖动后的第一次位置变化会有微小的跳跃，但是并不明显，暂时没有很简便的解决方法，除非重写一个新的手势判定标准。