[微信小程序] 当动画（animation）遇上延时执行函数（setTimeout）出现的问题

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

小程序中当动画animation遇上setTimeout函数内部使用this.setData函数，通常情况下会出现报错。本文先告诉解决方法，后分析报错原因

1.解决方法：

在 setTimeout() 函数的同级加上 const that = this; ，然后将this.setData换成that.setData就好了

贴上我的代码示例：

getMsg: function () {
const that = this;
// 动画内容
this.animation.translate(-115, -140).step(),
this.animation.translate(-100, -120).step(),
this.setData({
animation_bar_a: this.animation.export(),
//定时器
setTimeout(function () {
that.setData({
to_cover: 'none'
})
}, 1000)
}

2.分析报错原因

1）先看一下animation动画生成步骤

A.创建一个动画实例animation。

B.调用实例的方法来描述动画。

C.最后通过动画实例的export方法导出动画数据传递给组件的animation属性。

2）在getMsg()函数中如果不加const that = this;则到达setTimeout函数内，很多人以为呢（我刚解决后也是这样认为的），此时的this指代的是上个动画函数的匿名对象，用this当然就报错啦。

其实不然，经过反复尝试后，我发现，这是一个this作用域指向问题，setTimeout函数实际是一个闭包闭包闭包，无法直接通过this来setData。那么需要怎么修改呢？

我们通过将当前对象赋给一个新的对象

const that = this;

然后使用that 来setData就行了。

理解的核心就是理解js的闭包函数，对于闭包函数不理解的一定要好好查查哦

如果还有不懂的欢迎文章下评论哦，有问必答！