vue在切换页面时,销毁了上衣个组件,上一个页面的也要相应的setTimeout 注销:
1 setTimeout(function () { 2 if(that && !that._isDestroyed){//_isDestroyed 组件是否被销毁 3 that.getData(that.tableData.page.curr); 4 } 5 }, 3000);
笔者最近因为公司需求开发使用vue和jquery开发抓娃娃H5极简小游戏,使用到setTimeout函数。遇到了1个坑:
在vue的某个方法(点击后执行) setTimeout(this.end(),4000);//娃娃消失
这里奇怪的是,end方法的确被执行了。但是没有执行4s后执行的效果。那我要你合用呢!其实,问题还是出在笔者身上,大家请看下图
setTimeout的定义和用法。问题出在我的格式上面
其实是支持两种调用方式:1 字符 2 函数体(文章解决方式)
解决方法如下:
1、定义一个_this暂存this
2、再改变变量的值,则生效啦
3、方法中将this存在变量_this中,此时执行setTimeout函数时,setTimeout函数内的_this就会访问到这个变量,就会得到当前对象。
export default { methods: { start: function () { let _this=this setTimeout(function() { _this.end()//娃娃消失 }, 4000); } } }
注意⚠️:
当在vue中使用定时器在function里直接使用this,发现没有效果,这是由于setTimeout函数调用的代码运行在与所在函数完全分离的执行环境上,这会使得this指向的是window对象。拓展知识:解决vue在setTimeout内修改this失效的问题
要想setTimeout指向正确的值,可以使用如下方法:
1、使用箭头函数
export default { methods: { start: function () { setTimeout(() => { this.end()//娃娃消失 }, 4000); } } }
此时函数的this指向的是定义它的时候的对象,也就是this指向了data内中对应的变量。码字不易,对大家有用最佳
问题:setTimeout 函数内部效果 在Vue 事件中 没有执行
1、定义一个 that 暂存 this
2、再改变变量的值,就会生效var that = this; setTimeout(function () { that.modPassword = true; }, 3000)
vue在切换页面时,销毁了上衣个组件,上一个页面的也要相应的setTimeout 注销:
1 setTimeout(function () { 2 if(that && !that._isDestroyed){//_isDestroyed 组件是否被销毁 3 that.getData(that.tableData.page.curr); 4 } 5 }, 3000);
转载于:https://www.cnblogs.com/mxyr/p/9406804.html
1.前言
相信很多人都遇到过这样的问题,页面数据需要不断的刷新,也就是不断的发送ajax请求来更新数据,那么在vue中怎样做才比较好呢?这里介绍一下我踩的坑,以及解决方案
2.问题
settimeout用来调用请求数据,但是我遇到的问题就是,没有用合适的方式去关闭settimeout,出现了离开当前页面,请求还在不断的发送问题,这样给服务器带来了无必要的压力。附上之前的代码:
self.deployTimeOutId = setTimeout(() => {
self.getDeployList(false);
}, 5000);
说明:这一段代码是嵌在getDeployList方法中的,离开当前页面的是时候,必须要去手动的把这个settimeout清除才行。一般这个写在destoryed()这个钩子里。
window.clearTimeout(this.deployTimeOutId);
虽然这样处理了,但在逻辑比较复杂的情况下,还是出现了没有关闭的情况,而且排查起来很痛苦。下面介绍一种针对Vue比较好的做法。
3.解决方案
let self=this;
if (self && !self._isDestroyed) {
setTimeout(() => {
if (self && !self._isDestroyed)
self.getDeployList();
}, 5000);
}
_isDestroyed这个属性表示的是当前这个组件是否有被销毁,true表示当前的组件已经被销毁,通过上面这个判断,我们就不需要自己手动的去用ID来清除了,这个就相当于递归嘛,有了一个结束判断,避免了死循环咯~~