微信小程序中的在退出后再进入时，canvas中的定时动画效果异常

Question

我在入口页做了一个圆从里向外扩大循环往复的canvas动画效果，在开发工具测试是没有问题的，然后在真机测试时发现第一次进入也是没有问题的，但是若是在使用中退出小程序再进入就会出现动画的效果变得非常的快，下面是简单的代码（需要图片资源的部分可以注释掉），可以在真机测试下

<view class="home">
  <view class='home-header clearfix'>
    <view class='home-person' bindtap="ToUserCenter">
      <view class='home-personwrap'>
        <image src='../../static/person.png'></image>      
      </view>
    </view>
  </view>
    <canvas canvas-id='button' id='button' bindtap='ToIndex'>
    </canvas> 
</view>

Page({

  /**
   * 页面的初始数据
   */
  data: {
    range:40,
    PictempFilePath:'',
  },
  StartLogin(){
    qcloud.login({
      success(result) {
        console.log('登录成功', result);
      },

      fail(error) {
        console.log('登录失败', error);
      }
    });
  },
  ToUserCenter(){
    wx.navigateTo({
      url: '../usercenter/usercenter',
    })
  },
  ToIndex(){
    wx.navigateTo({
      url: '../index/index',
    })
  },
  
  drawImage(){
    let ctx = wx.createCanvasContext('button')
    ctx.translate(75,75)
    
    ctx.arc(0, 0, this.data.range, 0, 2 * Math.PI)
    ctx.drawImage('../../static/btn.png', -60, -60, 120, 120)
    ctx.setLineWidth(5)
    ctx.setStrokeStyle('#ff7058')
    ctx.setGlobalAlpha(0.8)
    ctx.stroke()
    ctx.draw()
  },
  RepetDraw(){
    clearInterval(t)
    var t = setInterval(() => {
      if (this.data.range < 65) {
        var range = this.data.range + 1
        this.setData({
          range: range
        })
      } else {
        this.setData({
          range: 50
        })
      }

      this.drawImage()
    }, 130)
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // this.Downloader()
   
    // this.StartLogin()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.RepetDraw()
  }

})

Answer 1

退出的时候清除循环:clearInterval(timer).

Answer 2

你好解决了吗