目录销毁window.addEventListener事件监听window.addEventListener监听scroll事件解决办法使用throttle出现的新问题最后代码
销毁window.addEventListener事件监听 今天在做项目的过程中,组件中调用iframe时,由于在组件的created方法中写了监听,用于接收iframe发来的信息,但是在组件销毁的时候并没有去掉监听,导致组件创建几次,监听方法就会执行几次,特此记录
1 2 3 | created() { window.addEventListener( 'message' , this .receiveMessage, false ) }, |
1 2 3 | beforeDestroy() { // 在组件生命周期结束的时候销毁。 window.removeEventListener( 'message' , this .receiveMessage, false ) }, |
window.addEventListener监听scroll事件 今天想在vue的项目里面用下拉加载,然后就直接写了:
1 2 3 4 5 6 | mounted () { window.addEventListener( 'scroll' , this .scrollHander) }, methods: { scrollHander () { ?} } |
但是我发现我切换路由以后依旧其他页面也触发了scrollHandler函数,然后我想到使用了vue-router做的spa项目,window对象不变的,所以需要在每次使用后销毁。
解决办法 我回去看了下vue文档的生命周期,看到了destroyed,然后直接在这个周期内销毁就可以了。
1 2 3 4 5 6 | mounted () { window.addEventListener( 'scroll' , this .scrollHander) }, destroyed () { window.removeEventListener( 'scroll' , this .scrollHander) } |
使用throttle出现的新问题 下拉加载一般需要配合throttle限流函数(原理可以看这里)来避免频繁触发,所以优化代码成这样:
1 2 3 4 5 6 | mounted () { let ?_this = this window.addEventListener( 'scroll' , throttle(() => { ? _this.scrollHander() },200 )) }, |
然后发现没法用removeEventListener了,因为这个函数第二个参数不接受匿名函数。
最后代码 用一个变量中转下
1 2 3 4 5 6 7 8 9 10 11 12 13 | mounted () { let ?_this = this this .throttleLoad = throttle(() =>{ ? _this.scrollHander() },200) window.addEventListener( 'scroll' , this .throttleLoad) }, destroyed () { window.removeEventListener( 'scroll' , this .throttleLoad)? }, methods: {? scrollHander () { } } |
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。