[微信小程序] 当动画（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的意义已经改变了，那么怎么办呢，直接在this改变前将this保存下来即可，即在动画生效前加上const that = this。

此时this就被保存在了that里，然后调用that代替this即可。

 

 

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