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

小程序中當動畫animation遇上setTimeout函數內部使用this.setData函數，通常情況下會出現報錯。本文先告訴解決方法，后分析報錯原因

1.解決方法：

在 setTimeout() 函數的同級加上?const that = this; ? ，然后將this.setData換成that.setData就好了

貼上我的代碼示例：

getMsg:  function () {
    const that = this;
    // 動畫內容
    this.animation.translate(-115, -140).step(),
    this.animation.translate(-100, -120).step(),
    this.setData({
    animation_bar_a: this.animation.export(),
    //定時器
    setTimeout(function () {
       that.setData({
          to_cover: 'none'
       })
    }, 1000)
}

?

2.分析報錯原因

1）先看一下animation動畫生成步驟

A.創建一個動畫實例animation。

B.調用實例的方法來描述動畫。

C.最后通過動畫實例的export方法導出動畫數據傳遞給組件的animation屬性。

2）在getMsg()函數中如果不加const that = this;則到達setTimeout函數內，很多人以為呢（我剛解決后也是這樣認為的），此時的this指代的是上個動畫函數的匿名對象，用this當然就報錯啦。

其實不然，經過反復嘗試后，我發現，這是一個this作用域指向問題 ，setTimeout函數實際是一個閉包 閉包 閉包， 無法直接通過this來setData。那么需要怎么修改呢？

我們通過將當前對象賦給一個新的對象

?const that = this;?

然后使用that 來setData就行了。

理解的核心就是理解js的閉包函數，對于閉包函數不理解的一定要好好查查哦

?

?

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

?