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

?

?

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

?

轉載于:https://www.cnblogs.com/piaobodewu/p/9338249.html

總結

以上是生活随笔為你收集整理的[微信小程序] 当动画（animation）遇上延时执行函数（setTimeout）出现的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。