js, for 循环,每隔几秒画一个大一点的同心圆不成功,希望可以帮忙看看

2018-01-06 21:41:43 +08:00
 sevenQu

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();
}
3339 次点击
所在节点    JavaScript
7 条回复
470326964
2018-01-06 22:05:59 +08:00
//循环画同心圆
for (var i = 0; i < 10; i += 1) {
(function(j) {
setTimeout(() => {
drawCircle(j * 20);
}, 1000 * j);
})(i);
}

不谢
sevenQu
2018-01-06 22:30:40 +08:00
@470326964 谢了,我明白了,感谢
Sparetire
2018-01-06 23:24:53 +08:00
理论上 1000 * j 这个操作可能存在整型溢出...

所以有 async/await 的话
function sleep(time) {
return new Promise(rs => setTimeout(rs, time));
}

async function draw() {
for (i = 0; i < 200; i += 10) {
drawCircle(i);
await sleep(2000);
}
}

draw();

没有的话
function draw(drawCircle, r, m, n, steps, interval) {
if (m < n) {
drawCircle(r);
setTimeout(() => draw(drawCircle, r + steps, m + steps, n, steps, interval), interval);
}
}
draw(drawCircle, 0, 0, 200, 10, 2000);
sevenQu
2018-01-07 11:30:13 +08:00
@Sparetire 谢谢,谢谢
bramblex
2018-01-07 11:38:45 +08:00
你先查一下 setInterval 的用法吧……
470326964
2018-01-07 12:25:51 +08:00
@Sparetire 厉害
sevenQu
2018-01-07 20:03:14 +08:00
@bramblex 嗯,确实,setInterval 更好

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/420695

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX