Many setIntervals in one animation

1

hello I 'm trying to give to my animation 2 different speeds with setInterval

var ctx = document.getElementById('my_canvas').getContext('2d');
				var al = 0;
				var start = 4.72;
				var cw = ctx.canvas.width;
				var ch = ctx.canvas.height; 
				var diff; 
				//var maxWidth = 100;
			loadingImg.style.display = 'none';
			if (window.matchMedia("(max-width: 540px)").matches) {
				console.log(true);
				loadingImg.style.display = 'initial';
				function progressSim(){
					diff = ((al / 100) * Math.PI*2*10).toFixed(2);//just 2 decimals
					ctx.clearRect(0, 0, cw, ch);
					ctx.lineWidth = 3;
					ctx.fillStyle = 'transparent';
					ctx.strokeStyle = "#09F";
					ctx.textAlign = 'center';
					// ctx.fillText(al+'%', cw*.5, ch*.5+2, cw);
					ctx.beginPath();
					ctx.arc(82.5, 82.5, 77.5, start, diff/10+start, false);//w,h, radius
					ctx.stroke();
					if(al >= 10){
						clearInterval(sim);
					}
					speed();
					//console.log(cw);
					al++;
					console.log(al);
				}
				var sim = setInterval(progressSim, 1000);
			}
			
			function speed(){
				if (al >= 10){
					console.log('end of animation current number: ' + al);
					//var simFaster = setInterval(progressSim, 400);
				}
			}

I create a function called speed to increase the speed of setInterval after : (al >= 10) . but it does not work , and after that function it run faster without end

2

Really hard to work out what is happening here. Do you have a codepen?

3

hi Johnny thank you very much I resolved the problem! :smiley: :fu: