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

最新推荐文章于 2023-08-21 20:07:40 发布

DellYounger

最新推荐文章于 2023-08-21 20:07:40 发布

阅读量4.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/piaobodewu/article/details/81122472

微信小程序专栏收录该内容

2 篇文章

订阅专栏

本文介绍了解决小程序中animation动画与setTimeout函数结合使用时出现的this指向问题的方法，并详细解析了问题产生的原因。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序中当动画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即可。

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