js， for 循环，每隔几秒画一个大一点的同心圆不成功?

Question

html 就是一个 canvas 标签，下面是 js 进行绘图，目标是每 2 秒画出一个同心圆，画 20 次，但是现在等待 2 秒后，全部同心圆将一同出现，我不太明白这应该怎么解决，我也查了闭包，也如下试了，还是不行，可能是我理解闭包不到位，希望有人可以修改一下代码，顺便解释一下我这样不行的原因

var canvas = document.getElementById("canvas");
    canvas.width = 1024;
    canvas.height = 768;
var context = canvas.getContext('2d');

//循环画同心圆
for (i = 0; i < 200; i += 10) {
    (function(j) {
        var repeat = "drawCircle(" + j + ")";
        console.log(j);
        setTimeout(repeat, 2000);
    })(i)

}
//画圆函数
function drawCircle(r) {
    context.beginPath();
    context.lineWidth = 5;
    context.arc(300, 300, r, 0, 2 * Math.PI, false);
    context.stroke();
}

Answer 1

var canvas = document.getElementById("canvas");
    canvas.width = 1024;
    canvas.height = 768;
var context = canvas.getContext('2d');

//循环画同心圆
for (i = 0; i < 200; i += 10) {
    (function(j) {
        var repeat = "drawCircle(" + j + ")";
        console.log(j);
        // setTimeout的时间应该是一个递增的值0，2s，4s，6s...
        setTimeout(repeat, 2000 * (i / 10)); 
    })(i)
}
//画圆函数
function drawCircle(r) {
    context.beginPath();
    context.lineWidth = 5;
    context.arc(300, 300, r, 0, 2 * Math.PI, false);
    context.stroke();
}