求解答小程序定时器问题

Question

//此代码控制canvas绘图
drawCircle() {
    var ctx = wx.createCanvasContext('canvasArcCir')
    var width = this.animation.canvasWidth / 2;
    
    function backgroundCircle() {
        ctx.save();
        ctx.beginPath();
        ctx.setLineWidth(8) //设置线宽 
        ctx.setLineCap('round');
        ctx.setStrokeStyle('#fff')
        ctx.arc(width, width, width - 8, 0, Math.PI * 2, false);
        ctx.stroke();
        ctx.closePath();
    }
    
    function drawArc(s, e) {
        var x = width,
            y = width,
            radius = width - 8;
        ctx.restore();
        ctx.beginPath();
        ctx.setLineWidth(4);
        ctx.setStrokeStyle('#4efefb');
        ctx.setLineCap('round');
        ctx.arc(x, y, radius, s, e, true);
        ctx.stroke()
        ctx.closePath();
    }
    var step = 1
    var startAngle = 1.5 * Math.PI
    var endAngle = 0;
    var animation_interval = 17
    var n = 420;
    var animation = ()=> {
        if (step <= n) {
            endAngle = step * 2 * Math.PI / n + 1.5 * Math.PI;
            backgroundCircle();
            drawArc(startAngle, endAngle);
            ctx.draw();
            step++;
        } else {
            clearInterval(this.varName);
        }
    };
    animation();
    this.varName = setInterval(animation, animation_interval);
    this.timerArray.push(this.varName);
}
    //此代码控制数字
numberStart() {
    let timer = setInterval(() => {
        this.time--;
        if (this.time <= 0) {
            clearInterval(timer);
        }
    }, 1000)
}

小程序代码如上，使用mpvue框架，使用定时器渲染canvas环形倒计时进度条，安卓没问题。在ios中，首次加载页面时显示正常，返回一次后，再次进入页面，定时器执行会出现问题。

比如在第一进入的时候17ms的定时器 在1s中会执行50次，那么第二次进入的时候在1s中只会执行30次，返回的次数越多，定时器执行的越慢，最后成为1s一次

最后会变成数字定时器都跑完了，canvas定时器才绘制了一点。

求大神解答... 感激不尽