[微信小程序] 当动画（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的闭包函数，对于闭包函数不理解的一定要好好查查哦

 

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