那些年遇到的bug 之一 ： 多次绑定事件

由于各种原因老大们决定使用sea.js模块化开发，所以需要把各功能重新梳理。保险起见一致决定先从首页着手处理，完成后再跟进其它的页面开发。

公司是做在线视频的，其中照片墙是首页其中一个版块，产品需求是：

　　1.定时更新数据，并且支持点击刷新数据
　　2.鼠标移到主播小图上，显示主播大图，并且显示当前主播的详细信息。
　　3.大图跟随鼠标移动。鼠标离开，大图消失。

 

费了一番功夫把功能都写好了，各浏览器测试了下并且能跑起来，效果如下：

 

没发现有什么问题，可是，生活总是无处不惊喜的 ( >﹏<。)。没多久却惊讶地发现：大图跟随鼠标移动卡成马了！！

又重新把代码审视了一遍，确认没问题后重新测试。

在chrome下盯着控制台，确认请求数据没问题。然后再查看HTML渲染结果，没问题。动画执行函数也没问题。然后切换IE看，发现在IE这个功能的其它动画执行得很好，但鼠标跟随依然卡成马（没错，IE总是能提前发现问题），思前想后还是先把pageX打印出来：

打印出来一看：每一次移动鼠标pageX按倍数打印。检查代码，原来每一次更新数据就绑定一次mouseover，造成了多次绑定。

解决方案是把最新的数据放到一个自定义属性里面去，然后把mouseover函数提取出来。修改好后再次测试，一切正常 O(∩_∩)O~~ 。