在vue的某个方法(点击后执行)
setTimeout(this.callback(),3000);
这里奇怪的是callback方法的确被执行了。但是没有执行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.callback()//4秒后执行
}, 4000);
}
}
}
当在vue中使用定时器在function里直接使用this,发现没有效果,这是由于setTimeout函数调用的代码运行在与所在函数完全分离的执行环境上,这会使得this指向的是window对象。
拓展知识:解决vue在setTimeout内修改this失效的问题
要想setTimeout指向正确的值,可以使用如下方法:
1、使用箭头函数
export default {
methods: {
start: function () {
setTimeout(() => {
this.callback()//4秒后执行
}, 4000);
}
}
}
此时函数的this指向的是定义它的时候的对象,也就是this指向了data内中对应的变量。