[微信小程序] 当动画(animation)遇上延时执行函数(setTimeout)出现的问题
小程序中当动画animation遇上setTimeout函数内部使用this.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即可。
如果还有不懂的欢迎文章下评论哦,有问必答!