案例总结【原生js实现烦人的广告弹框】

仿写了一个简单的广告弹窗,主要功能就是页面加载完毕时,右下角广告弹出来,点了×,过一会又自己弹出来,样式如下

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,如果是在运动,那么点击就不会重复添加事件。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一章 1.什么是DOM DOM: Document Object Model(文档对象模型) 是JavaScri...
    fastwe阅读 824评论 0 0
  • 【幸福女孩 糖糖 二年级 坚持原创分享第665天 2019.07.09 星期二】
    何亚珂阅读 129评论 0 0
  • 夜的微光熏陶着这座城市,一切都是那么宁静,祥和。望着窗外,星空下的城市早已陷入了沉睡。困倦在身边萦绕着,却迟...
    Archer_015阅读 176评论 0 0
  • 都说没有对比就没有伤害, 不过没有对比也就没有幸福。 和一位和我差不多的 在异国他乡(他异国我他乡)苦逼求学 的老...
    Ms柔依阅读 231评论 0 3
  • 爱情 一个老生常谈的话题,人们常在懵懂时期便对此有了憧憬和向往 然而事与愿违,第一段抱有热情付出的爱,最终却又付之...
    洛阳生的小故事阅读 122评论 0 1