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

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

  •  
  •   sevenQu · 2018-01-06 21:41:43 +08:00 · 3344 次点击
    这是一个创建于 2512 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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
    470326964
        1
    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
        2
    sevenQu  
    OP
       2018-01-06 22:30:40 +08:00
    @470326964 谢了,我明白了,感谢
    Sparetire
        3
    Sparetire  
       2018-01-06 23:24:53 +08:00   ❤️ 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);
    sevenQu
        4
    sevenQu  
    OP
       2018-01-07 11:30:13 +08:00
    @Sparetire 谢谢,谢谢
    bramblex
        5
    bramblex  
       2018-01-07 11:38:45 +08:00
    你先查一下 setInterval 的用法吧……
    470326964
        6
    470326964  
       2018-01-07 12:25:51 +08:00
    @Sparetire 厉害
    sevenQu
        7
    sevenQu  
    OP
       2018-01-07 20:03:14 +08:00
    @bramblex 嗯,确实,setInterval 更好
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1491 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 17:15 · PVG 01:15 · LAX 09:15 · JFK 12:15
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.