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

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


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

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

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

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

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

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


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

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

【全都是流水账,仅仅记录进步的点滴】
原文地址:https://www.cnblogs.com/Travel/p/4365932.html