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

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

解决方法：

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

贴上我的代码示例：

 1 getMsg:  function () {
 2     const that = this;
 3     // 动画内容
 4     this.animation.translate(-115, -140).step(),
 5     this.animation.translate(-100, -120).step(),
 6     this.setData({
 7     animation_bar_a: this.animation.export(),
 8     //定时器
 9     setTimeout(function () {
10        that.setData({
11           to_cover: 'none'
12        })
13     }, 1000)
14 }

2.分析报错原因

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

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

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

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

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

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

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

 1 const that = this; 

然后使用that 来setData就行了。

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

 

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