@H_ 360 _26@setTimeout在vue中的正确使用
笔者最近因为 公司 需求开发使用vue和 jq uery开发抓娃娃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指向正确的值，可以使用如下方法：
使用箭头函数
e xp ort default {
methods: {
start: function () {
setTimeout(() => {
this.end()//娃娃消失
}, 4000);
}
}
}
此时函数的this指向的是定义它的时候的对象，也就是this指向了data内中对应的变量。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持。
您可能感兴趣的文章: Vue项目中使用setTimeout存在的潜在问题及解决 VUE中setTimeout和setInterval自动销毁案例 vue 解决setTimeOut和setInterval函数无效报错的问题 解决vue.js中settimeout遇到的问题(时间参数短效果不稳定) Vue中使用setTimeout问题
总结
以上是 为你收集整理的 setTimeout在vue中的正确使用方式 全部内容，希望文章能够帮你解决 setTimeout在vue中的正确使用方式 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于setTimeout在vue中的正确使用方式的详细内容...