setTimeout在vue中的正确使用方式
更新时间：2023年01月19日 10:51:02 作者：大唐锦绣
这篇文章主要介绍了setTimeout在vue中的正确使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
setTimeout在vue中的正确使用
笔者最近因为公司需求开发使用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指向正确的值，可以使用如下方法：
使用箭头函数
export default {
methods: {
start: function () {
setTimeout(() => {
this.end()//娃娃消失
}, 4000);
}
}
}此时函数的this指向的是定义它的时候的对象，也就是this指向了data内中对应的变量。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
下面小编就为大家分享一篇vue中手机号,邮箱正则验证以及60s发送验证码的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了Vue3 源码导读(推荐)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
vue源码学习之Object.defineProperty 对数组监听
这篇文章主要介绍了vue源码学习之Object.defineProperty 对数组监听，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要介绍了Vue中的@blur事件 当元素失去焦点时所触发的事件问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
本文主要介绍了vite创建一个标准vue3+ts+pinia项目，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
这篇文章主要介绍了浅谈vue后台管理系统权限控制思考与实践，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要为大家详细介绍了在Vue中如何实现自定义hooks(组合式)函数，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下2023-03-03
为了进一步让大家了解Vue.js的神奇魅力，了解Vue.js的一种以数据为驱动的理念，本文主要利用Vue实现了一个数字拼图游戏，其原理并不是很复杂，下面跟着小编一起来学习学习。2016-08-08
vue2.0里，不再有自带的过滤器，需要自己定义过滤器。下面通过实例代码给大家介绍vue2中filter()的相关知识，感兴趣的朋友一起看看吧2017-07-07
这篇文章主要介绍了浅析Proxy可以优化vue的数据监听机制问题及实现思路,需要的朋友可以参考下2018-11-11
最新评论