最近因为公司需求开发使用vue开发项目,在开发到某个表单提交功能时(提交之后先出现对应的消息提示弹窗,提示弹窗消失之后再跳转到相应的页面),使用到setTimeout函数。遇到了1个坑:

在vue的某个方法(点击后执行)
this.test();//页面跳转
这里奇怪的是,test方法的确被执行了。但是没有执行1.6s后执行的效果(页面跳转的效果)。那我要你何用呢!其实,问题还是出在笔者身上,大家请看下图

setTimeout的定义和用法。问题出在我的格式上面

其实是支持两种调用方式:1 字符 2 函数体(文章解决方式)

解决方法如下:

1、定义一个_this暂存this

2、再改变变量的值,则生效啦

3、方法中将this存在变量_this中,此时执行setTimeout函数时,setTimeout函数内的_this就会访问到这个变量,就会得到当前对象。

test: function () {
let _this=this
setTimeout(function() {
//你要执行的事件
}, 1600);
}

注意⚠️:

当在vue中使用定时器在function里直接使用this,发现没有效果,这是由于setTimeout函数调用的代码运行在与所在函数完全分离的执行环境上,这会使得this指向的是window对象。拓展知识:解决vue在setTimeout内修改this失效的问题

要想setTimeout指向正确的值,可以使用如下方法:

1、使用箭头函数

setTimeout(() => {
//你要执行的事件
}, 1600)

此时函数的this指向的是定义它的时候的对象,也就是this指向了data内中对应的变量。

码字不易,希望能给大家带来些许帮助

Logo

前往低代码交流专区

更多推荐