解决vue在setTimeout内修改this失效的问题
在项目中会遇到 定时方面的需求。我们来用setTimeout来处理。
1.简单业务需求
var itime = setInterval(function() {
if(_this.step0_payMaxTime > 0) {
_this.step0_payMaxTime-=1000;
}
if(_this.step0_payMaxTime <= 0) {
clearInterval(itime);
//TODO 时间到了，进入取消状态
_this.orderState=3;
}
}, 1000)2.复杂业务
var ite =setInterval(_this.tipSellMsg(), 1000);
上面的代码，tipSellMsg 只执行一次，没有按1s 循环去执行。
var iti = setInterval(function () {
_this.tipSellMsg()
}, 1000)
使用箭头函数
var iti = setInterval(()=>{_this.tipSellMsg()}, 1000)
【解决vue在setTimeout内修改this失效的问题】以上是正确的写法。
原因：当在vue中使用定时器在function里直接使用this，发现没有效果，这是由于setTimeout函数调用的代码运行在与所在函数完全分离的执行环境上，这会使得this指向的是window对象。
推荐阅读
- parallels|parallels desktop 解决网络初始化失败问题
- 你到家了吗
- 闲杂“细雨”
- 杜月笙的口才
- 赢在人生六项精进二阶Day3复盘
- 考研英语阅读终极解决方案——阅读理解如何巧拿高分
- 祖母走了
- 樱花雨
- 眼观耳听美食的日子
- vue-cli|vue-cli 3.x vue.config.js 配置