清除并重新启动一个间隔，而另一个间隔正在运行

Question

我正在尝试制作动画，其中一辆汽车的图片显示5秒钟，然后显示一张新图像，另外5秒钟，然后我要显示的最后一张图像显示10秒钟，当它“驶离”画布时。 我已经准备好头10秒。汽车将在最后10个行驶，但是当我清除间隔时，它会继续行驶并且动画不会重新开始。

（秒=秒） 到目前为止，这是我的代码：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var front = document.getElementById("front");
var back = document.getElementById("back");
var side = document.getElementById("side");
var height = canvas.offsetHeight;
var width = canvas.offsetWidth;
var mili = 0;
var sekunder = 0;

function draw(){

    if(sekunder == 0 || sekunder < 5){
        ctx.clearRect(0, 0, width, height);
        ctx.drawImage(front, 0, 0);
    }

    else if(sekunder == 5 || sekunder < 10){
        ctx.clearRect(0, 0, width, height);
        ctx.drawImage(back, 0, 0);
    }
    else if(sekunder == 10 || sekunder < 20){
        var car3 = setInterval(movecar, 10);

    }
    sekunder ++;

    if(sekunder == 20){
        sekunder = 0;
        clearInterval(car3);
        mili = 0;

    }
}
function movecar(){
    mili++;
    ctx.clearRect(0, 0, width, height);
    ctx.drawImage(side, -1*mili, 0);
}
draw();
setInterval(draw, 1000);