zoukankan      html  css  js  c++  java
  • 那些年遇到的bug 之一 : 多次绑定事件

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


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

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

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

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

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

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


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

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

    【全都是流水账,仅仅记录进步的点滴】
  • 相关阅读:
    在 MAC 下配置 Nginx
    Color Schema 配色随笔
    .Net与 WebAssembly 随笔
    关于Xamarin、Qml、数据绑定、MVC、MVVM 相关的散讲
    用Nuget部署程序包
    Qt3D
    Qt3D Shader
    Qt QML 2D shader
    LearnOpenGL
    Qt3D 5.9 and future
  • 原文地址:https://www.cnblogs.com/Travel/p/4365932.html
Copyright © 2011-2022 走看看