仿写了一个简单的广告弹窗，主要功能就是页面加载完毕时，右下角广告弹出来，点了×，过一会又自己弹出来，样式如下
image
完整代码放在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，如果是在运动，那么点击就不会重复添加事件。
网友评论