首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
V2EX  ›  JavaScript

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

  •  
  •   sevenQu · 168 天前 · 1419 次点击
    这是一个创建于 168 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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();
    }
    
    7 回复  |  直到 2018-01-07 20:03:14 +08:00
        1
    470326964   168 天前
    //循环画同心圆
    for (var i = 0; i < 10; i += 1) {
    (function(j) {
    setTimeout(() => {
    drawCircle(j * 20);
    }, 1000 * j);
    })(i);
    }

    不谢
        2
    sevenQu   168 天前
    @470326964 谢了,我明白了,感谢
        3
    Sparetire   168 天前   ♥ 1
    理论上 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);
        4
    sevenQu   167 天前
    @Sparetire 谢谢,谢谢
        5
    bramblex   167 天前
    你先查一下 setInterval 的用法吧……
        6
    470326964   167 天前
    @Sparetire 厉害
        7
    sevenQu   167 天前
    @bramblex 嗯,确实,setInterval 更好
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   鸣谢   ·   1675 人在线   最高记录 3541   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.1 · 16ms · UTC 15:28 · PVG 23:28 · LAX 08:28 · JFK 11:28
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1