I am a javascript beginner. I am learning game programming using javascript. In the class, our teacher started giving lectures on HTML 5 canvas to animate objects. In that I am not able to grasp the 'process' of setInterval. I am not able to comprehend what it does exactly? Is that loop. When we give setInterval( gameLoop, 100) , is it calling the function gameLoop 100 times. Or is it calling the function every 100 milli seconds ?

For example- in this code, how the radius of the circle get increased ? Is it because of the setInterval function or is it because I have given r=r+dir. If it is because of r=r+dir, how many times it will loop like that, If i didn't give its limit as 80?

Code :

<html>

<head>

<title></title>

</head>

<body>


<canvas id="myc" width="500" height="400"></canvas >



<script>

var g_canvas = document.getElementById("myc") ;
var g_ctx = g_canvas.getContext("2d") ;


function drawCircle(l_x, l_y, l_r, l_color )
{
g_ctx.fillStyle = l_color;
g_ctx.beginPath();
g_ctx.arc(l_x, l_y, l_r, 0, 6.28 );
g_ctx.fill() ;
}


var r = 10 ;
var dir = 2 ;

function gameLoop()
{
g_ctx.clearRect(0, 0, g_canvas.width, g_canvas.height) ;
drawCircle(140, 120, r, "red") ;

if (dir != 0)
{
r = r + dir ;

if (r >= 80)
{
dir = -dir ;
}

if (r <= 10)
{
dir = 0 ;
}
}
}

setInterval(gameLoop, 100) ;
</script>
</body>

</html>



If I didn't give the if condition with radius as 80, how many times it will loop and what is the reason for it is to loop (if it loops infinite?)?

Thanks in advance ! I'm a beginner. This might look like a silly questions but I'm really struggling with this. I hope you guys help. Thank you