To solve the problem of Mini Program timer

//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("-sharpfff")
        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("-sharp4efefb");
        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();
            stepPP;
        } 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)
}

Mini Program code as above, use mpvue framework, use timer to render canvas circular countdown progress bar, Android is no problem. In ios, the page is displayed normally when the page is loaded for the first time, but when you return to the page once and enter the page again, there will be a problem with timer execution.

for example, the timer of 17ms will be executed 50 times in 1 s on the first entry, then only 30 times in 1 s on the second entry. The more times the timer is returned, the slower the timer executes. Finally, it becomes 1 s once

.

will eventually turn into a digital timer. After all, the canvas timer is drawn a little bit.

ask for the answer of the Great God. Thank you very much

Menu