解决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中使用定时器在function里直接使用this，发现没有效果，这是由于setTimeout函数调用的代码运行在与所在函数完全分离的执行环境上，这会使得this指向的是window对象。