Question

我正在尝试在jQuery中创建一个应用程序（我是新手），其中每秒都会在画布中随机出现圆圈。我在for循环中生成它们但不知道如何在经过一段时间后使它们出现。我尝试使用setInterval（）和delay（），但它没有工作（我认为我的语法写得不好）。对不起，如果这个问题太基础了。

这是我的代码：

var canvas, ctx;
var circles = [];
var selectedCircle;
var hoveredCircle;

function Circle(x, y, radius){
    this.x = x;
    this.y = y;
    this.radius = radius;
}

function clear() { // clear canvas function
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

function drawCircle(ctx, x, y, radius) { // draw circle function
    ctx.fillStyle = 'rgba(255, 35, 55, 1.0)';
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fill();
}

$(function(){
    canvas = document.getElementById('scene');
    ctx = canvas.getContext('2d');

    var circleRadius = 15;
    var width = canvas.width;
    var height = canvas.height;

    var circlesCount = 60; // we will draw 60 circles randomly
    for (var i=0; i<circlesCount; i++) {
        var x = Math.random()*width;
        var y = Math.random()*height;    
        circles.push(new Circle(x,y,circleRadius));
        drawCircle(ctx, circles[i].x, circles[i].y, circleRadius);
    }
});

感谢您的帮助！

编辑：以下几个例子没有用：

delay(1000) // after drawing function
drawCircle(ctx, circles[i].x, circles[i].y, circleRadius).delay(1000);
setInterval(drawCircle(ctx, circles[i].x, circles[i].y, circleRadius) {
}, 2000);
drawCircle(ctx, circles[i].x, circles[i].y, circleRadius).delay(1000).setInterval(1000);

Answer 1

您需要重新构建代码（不能使用for循环），以便可以从setInterval()回调函数中绘制每个圆圈，如下所示：

$(function(){
    canvas = document.getElementById('scene');
    ctx = canvas.getContext('2d');

    var circlesCount = 60; // we will draw 60 circles randomly
    var circleRadius = 15;
    var width = canvas.width;
    var height = canvas.height;

    function makeCircle() {
        var x = Math.random()*width;
        var y = Math.random()*height;    
        var c = new Circle(x,y,circleRadius);
        circles.push(c);
        drawCircle(ctx, c.x, c.y, circleRadius);
        if (circles.length >= circlesCount) {
            clearInterval(interval);
        }
    }

    var interval = setInterval(makeCircle, 1000);
    makeCircle();
});

延迟时间量作为setInterval()的第二个参数。我在这里做了1000毫秒（1秒），但你可以使用你想要的任何值。如果您希望延迟时间是随机的，那么您将使用setTimeout()而不是setInterval()的重复调用，并且您将为每个setInterval()调用生成随机时间。

可以生成两个值之间的随机整数，如下所示：

function randomBetween(low, high) {
    return (Math.floor(Math.random() * (high - low)) + low);
}

因此，如果您希望圈子在100毫秒到1000毫秒之间随机出现，那么您的代码将如下所示：

$(function(){
    canvas = document.getElementById('scene');
    ctx = canvas.getContext('2d');

    var circlesCount = 60; // we will draw 60 circles randomly
    var circleRadius = 15;
    var width = canvas.width;
    var height = canvas.height;

    function makeCircle() {
        var x = Math.random()*width;
        var y = Math.random()*height;    
        var c = new Circle(x,y,circleRadius);
        circles.push(c);
        drawCircle(ctx, c.x, c.y, circleRadius);
        if (circles.length < circlesCount) {
            setTimeout(makeCircle, randomBetween(100, 1000));
        }
    }

    makeCircle();
});

注意：在这两个代码块中，我通过查看circles.length重新构建了跟踪圈数的方式，因为它是一个自然的，预先存在的计数器，表示您创建了多少个圈。

Answer 2

尝试以下解决方案。阅读评论了解更多详情

$(function(){
    canvas = document.getElementById('scene');
    ctx = canvas.getContext('2d');

    var circleRadius = 15;
    var width = canvas.width;
    var height = canvas.height;
    var timer, index = 0;

    var circlesCount = 60; // we will draw 60 circles randomly
    for (var i=0; i<circlesCount; i++) {
        var x = Math.random()*width;
        var y = Math.random()*height;    
        circles.push(new Circle(x,y,circleRadius));
    }

    // draw one circle per second
    timer = setInterval(function(){
        // exit loop when there's no more circles to draw
        if(index >= circles.length) {
             // also clear the timer
             clearInterval(timer);
             return;
        }

        drawCircle(ctx, circles[index ].x, circles[index ].y, (hoveredCircle == index) ? 25 : 15);
        // go to next circle
        index += 1;
    }, 1000);
});

Answer 3

假设圆圈正确添加到画布，您需要将超时置于for循环中。 for循环会尽可能接近一次执行所有内容，因此随机区分它们可能就是你的答案：

setTimeout(function(){
    //-- code that adds circles here --//
}, ( Math.floor(Math.random()*11) * 1000 ) );

( Math.floor(Math.random()*11) * 1000 )创建一个介于0到10之间的随机数，乘以1000，然后将该循环延迟一段时间。

放手一搏。

for循环中的jQuery setInterval

3 个答案: