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

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


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

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

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

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

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

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


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

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

    【全都是流水账,仅仅记录进步的点滴】
  • 相关阅读:
    Net基础篇_学习笔记_第十二天_面向对象继承(命名空间 、值类型和引用类型)
    Net基础篇_学习笔记_第十一天_面向对象(练习)
    js判断客户端是pc还是移动端
    swoole_table
    Master Reactor Manager Worker TaskWorker(Task)
    阻塞,非阻塞,同步,异步
    进程,线程与协程
    swoole 安装与简单应用
    laravel 简单应用 redis
    ubuntu 设置固定IP
  • 原文地址:https://www.cnblogs.com/Travel/p/4365932.html
Copyright © 2011-2022 走看看