小程序中當動畫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的閉包函數,對於閉包函數不理解的一定要好好查查哦
如果還有不懂的歡迎文章下評論哦,有問必答!