仿写了一个简单的广告弹窗,主要功能就是页面加载完毕时,右下角广告弹出来,点了×,过一会又自己弹出来,样式如下
完整代码放在GitHub仓库:https://github.com/HiJackLi/demo/
一、要点记录
1.弹框运动需要几个可供用户配置的参数:运动距离(盒子高度决定)、运动时间、运动速度(运动步数决定)、等待重复出现时间
2.通过定时器setTimeout来进行每一帧的运动,并需要一个帧数记录器来记录弹框运动了几次
3.当帧数记录的数<运动总步数时,重复进行上面的运动,也就涉及递归了。
4.页面初始化时运动是向上运动,点击×是向下运动,等待一会出现是向上运动,所以有两种运动函数,一个向上,一个向下。
5.每次运动结束要清除定时器,并且置为null,帧数记录器也要归零
6.点击×需要上锁,避免重复点击。可以通过定时器返回值timer==null来判断是否进行下一步运动
二、反思问题
1.在获取弹框的高度时用Element.style.height的方法是一大错误,因为这种方法获取不到外部样式,最后通过网上查找了解到了一个方法getComputedStyle(),这个能够获取完整的元素样式表,唯一不足就是对属性只读不能写,重新赋值操作还得Element.style
2.获取元素的定位bottom时忘记使用parseFloat方法去掉单位
3.中间一直出问题,由于使用对象编程的方式,在定时器和递归中的this指向问题上被搞晕了。因为我用var self = this的方法来解决this指向问题,最后发现根本不行,由于递归很多次,这种方法只能解决一层。后面使用了bind才解决了,并且上网查了一下call和apply也不行,因为call和apply会立即执行运动函数,不会等待定时器的计时,所以递归会进行,但是并没有运动的迹象。而bind是返回一个新的函数等待被执行。
4.加锁思想一直思维定势,总是想声明一个变量来给个布尔值进行加锁,其实可以根据情况判断,比如这种案例可以用定时器的返回值是否为null来判断,因为每次运动结束都要置为null,如果是在运动,那么点击就不会重复添加事件。