setTimeout在vue中的正确使用方式
2023-01-19 11:38:13 来源：易采站长站 作者：
目录setTimeout在vue中的正确使用遇到了1个坑问题出在我的格式上面解决vue在setTimeout内修改this失效使用箭头函数总结setTimeout在vue中的正确使用笔者最近因为公司需...
目录
setTimeout在vue中的正确使用遇到了1个坑
问题出在我的格式上面
解决vue在setTimeout内修改this失效
使用箭头函数
总结
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内中对应的变量。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
如有侵权，请发邮件到 [email protected]
最新图文推荐
相关文章
-
vue跳转不同页面的多种方法 1：router-link跳转 !-- 直接跳转 --router-link to='/testDemo' button点击跳转2/button/router-link !-- 带参数跳转 --router-link :to="{path:'testDemo',query:{setid:123456}}" button点击跳转2020-03-26
-
Vue+elementUI实现多图片上传与回显功能（含回显后继续上传或删除
最近有使用vue+elementUI实现多图片上传的需求，遂做此纪录。 本次主要写一下前端的实现细节，至于后台以Multipart[ ]数组接收即可，不再赘述，网上一搜大把文章可供参考。 本次使用2020-03-23
-
上效果图: 一:搜索框功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面 view class='page_row' bindtap="suo" view class="search" view class="df search_arr" icon class="searchcion" size='20' type='search'/2020-03-10
-
本文实例为大家分享了微信小程序分享朋友圈海报的具体代码，供大家参考，具体内容如下 思路：生成朋友圈海报放在公共文件，首先需要绘制canvas，点击分享朋友圈按钮，在手机屏幕2020-06-21
-
当下， 我们几乎所有的项目都是基于 webpack、rollup 等构建工具进行开发的，模块化已经是常态。 我们对它并不陌生，今天，我们就再系统的回顾一下ES6的模块机制， 并总结下常用的操2020-07-04
-
Vue-router 报错NavigationDuplicated的解决方法
版本：3.1.x 报错原因： 使用push()、replace()进行导航时，不能重复导航到当前路由。 解决办法： 方法1：在定义路由的文件中router/index.js const originalPush = VueRouter.prototype.pushVueRouter.protot2020-03-31
-
本文实例为大家分享了vue实现滑动以及左右联动效果的具体代码，供大家参考，具体内容如下 一、首先需要在项目中引入better-scroll 1. 在package.json 直接写入 "better-scroll":"^1.15.1" 版本以2020-06-30
-
在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么vendor.js文件体积将会相当的大，影响2020-06-25
豫公网安备 41019702003123号