vue项目中销毁window.addEventListener事件监听解析
目录销毁window.addEventListener事件监听window.addEventListener监听scroll事件解决办法使用throttle出现的新问题最后代码
销毁window.addEventListener事件监听 今天在做项目的过程中,组件中调用iframe时,由于在组件的created方法中写了监听,用于接收iframe发来的信息,但是在组件销毁的时候并没有去掉监听,导致组件创建几次,监听方法就会执行几次,特此记录
|
1 2 3 |
|
|
1 2 3 |
|
window.addEventListener监听scroll事件 今天想在vue的项目里面用下拉加载,然后就直接写了:
|
1 2 3 4 5 6 |
|
但是我发现我切换路由以后依旧其他页面也触发了scrollHandler函数,然后我想到使用了vue-router做的spa项目,window对象不变的,所以需要在每次使用后销毁。
解决办法 我回去看了下vue文档的生命周期,看到了destroyed,然后直接在这个周期内销毁就可以了。
|
1 2 3 4 5 6 |
|
使用throttle出现的新问题 下拉加载一般需要配合throttle限流函数(原理可以看这里)来避免频繁触发,所以优化代码成这样:
|
1 2 3 4 5 6 |
|
然后发现没法用removeEventListener了,因为这个函数第二个参数不接受匿名函数。
最后代码 用一个变量中转下
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐


所有评论(0)