[微信小程序] 當動畫(animation)遇上延時執行函數(setTimeout)出現的問題


小程序中當動畫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的閉包函數,對於閉包函數不理解的一定要好好查查哦

 

 

如果還有不懂的歡迎文章下評論哦,有問必答!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM