小程序中当动画animation遇上setTimeout函数内部使用this.setData函数,通常情况下会出现报错。本文先告诉解决方法,后分析报错原因
1.解决方法:
在 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的闭包函数,对于闭包函数不理解的一定要好好查查哦
如果还有不懂的欢迎文章下评论哦,有问必答!