项目中经常会使用到addEventListener,setInterval,非常好用,但也会有一些意想不到的bug。
场景 :项目中在mounted中绑定了一个监听器 window.addEventListener('message', this.getList) ,父子页面间通过 postMessage 发送消息,然后就出现了bug, this.getList 调用了好几次,刚开始没有规律,以为代码有问题,postMessage发送了好几条消息,又以为是监听到了其他页面发的消息,排查后发现都不是,并且发现规律,每跳转一次页面就会多发送一次消息,才想到是监听器没有销毁,于是每次进页面都会绑定一次监听,导致getList执行多次。

设置后一定要销毁,否则监听会一直存在。

设置定时器

setinterval 不会自动关闭
在要设置定时器的地方

this.timer = setInterval(function() {
  self.getList()
}, 1000 * 60)

定时器最好不要直接写在mounted,建议写在methods里
然后一定要销毁定时器,避免浪费资源。
也可以在methods中销毁定时器,但是不销毁的话就会一直执行

beforeDestroy(){
  if (this.timer) {
     clearInterval(this.timer); // 在Vue实例销毁前,清除我们的定时器

addEventListener监听

在一个项目的页面中嵌入另一个项目的页面,需要实现父子,子父页面的通信。
window.postMessage() 方法可以安全地实现跨源通信。
但是一定要清除监听
在这里插入图片描述

页面监听一般写在mounted中

window.addEventListener('message', this.getList)
this.iframeWin = this.$refs.iframe.contentWindow  //获取到iframe的contentWindow属性

iframe与页面间传消息一般采用postMessage

// 向父vue页面发送信息
this.iframeWin.postMessage({
  cmd:'writeDeviceName',
  params:{
    data:{
      msg:this.msg
}, '*')

beforeRouteLeave:离开路由之前执行的函数,可用于页面的反向传值,页面跳转。
离开路由前销毁监听,也可以写在methods中,自行判断并销毁

beforeRouteLeave(to,from,next){
  window.removeEventListener('message', this.handleMessage)
  next()
                    项目中经常会使用到addEventListener,setInterval,非常好用,但也会有一些意想不到的bug。场景:项目中在mounted中绑定了一个监听器window.addEventListener('message', this.getList),父子页面间通过postMessage发送消息,然后就出现了bug,this.getList调用了好几次,刚开始没有规律,以为代码有问题,p...
				
window.postMessage()方法可以安全地启用对象之间的跨域通信。 例如,在页面与其产生的弹出窗口之间,或在页面与嵌入其中的iframe之间。 通常,只有并且当它们源自的页面共享相同的协议,端口号和主机时,才允许不同页面上的脚本相互访问(也称为“同源策略”)。 window.postMessage()提供了一种受控机制来安全地规避此限制(如果使用正确)。 来源: :
目标功能: 页面一跨域open页面二,页面二通过addEventListener监听到消息后,返回确认信息。页面一通过addEventListener监听页面二发送的确认信息后,将数据包发送给页面二。页面二获取数据包后进行处理。 postMessage简介(摘抄自他人博客,如涉抄袭,请联系我): HTML5提出了一个新的用来跨域传值的方法,即postMessage。我们假设有两个网站,1.com与2.com,我在1.com的页面上通过iframe或window.open或超链接打开了一个2.com的网
最近负责的项目要接入计费功能,有了计费自然需要充值。说起充值,无外乎支付宝、微信和网银了,然后前端调用充值接口后,需要起一个轮询任务,去监听支付状态,根据轮询结果来进行下一步的操作(当然了,有条件的大户人家想要直接上websocket也没问题)。所以,业务场景倒是很easy,梳理完逻辑我就吭哧吭哧开搞了… 然而,当我基本写完在调试时,发现每次轮询停止了,页面上的状态会刷新两次。当时的业务是需要我在支付状态时显示验证码过期的倒计时,然而倒计时结束后会重新计时一次,这里可以不关心,原因就是轮
window.postMessage() 方法允许来自一个文档的脚本可以传递文本消息到另一个文档里的脚本,不用管是否跨域。一个文档里的脚本还是不能调用在其他文档里方法和读取属性,但他们可以用window.postMessage结合window.addEventListene这种消息传递技术来实现安全的通信。 window.addEveantListener('message',(event)=>{}) event 的属性有: data: 从其他 window 传递过来的数据副本。 ori..
类与原型对象关系——创建一个新函数的时候,js引擎会为默认为该函数创建一个prototype属性,这个属性值是一个原型对象,这个对象里默认有一个constructor构造函数属性,constructor属性的值是这个函数。 实例与原型对象——实例的原型属性是_proto_,这个属性的值与类的prototype值一致(注意:重写原型对象应在实例化之前。否则会切断实例与类之间的联系) 继承——子类原型对象指向父类实例(1、子类必须要有父类原型上的属性,但是字类的原型对象不能跟父类的一致) 箭头函数的作用域
jQuery定时器setInterval是一个函数,用于在指定的时间间隔内重复执行指定的代码。它可以用于实现动画效果、轮播图、定时刷新等功能。使用setInterval函数时,需要指定要执行的代码和时间间隔,同时返回一个计时器ID,可以用于取消定时器。例如: var timerId = setInterval(function(){ //要执行的代码 }, 100); //每隔1秒执行一次 要取消定时器,可以使用clearInterval函数,传入计时器ID即可。例如: clearInterval(timerId); //取消定时器