for循环中的jQuery setInterval

我正在尝试在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);
    }
});

---

尝试下面的解决方案。阅读评论了解更多细节

$(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);
});

$（函数（）{
canvas=document.getElementById（'scene'）；
ctx=canvas.getContext（'2d'）；
循环变异系数=15；
var width=canvas.width；
var height=canvas.height；
变量计时器，索引=0；
var circlescont=60；//我们将随机画60个圆
对于（var i=0；i请尝试下面的解决方案。有关更多详细信息，请阅读注释

$(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);
});

$（函数（）{
canvas=document.getElementById（'scene'）；
ctx=canvas.getContext（'2d'）；
循环变异系数=15；
var width=canvas.width；
var height=canvas.height；
变量计时器，索引=0；
var circlescont=60；//我们将随机画60个圆
for（var i=0；i假设圆正确地添加到画布中，您需要将超时放入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循环中。for循环将尽可能一次执行所有内容，因此随机将它们隔开可能是您的答案：

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

（Math.floor（Math.random（）*11）*1000）
生成一个介于0和10之间的随机数，乘以1000，然后将圆圈延迟该时间

试一试。
您需要重新构造代码（不能对
循环使用
），以便可以从
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();
});

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

$(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();
});

延迟时间的大小作为
setInterval（）
的第二个参数。我在这里设置了1000ms（1秒），但是您可以使用任何想要的值。如果您希望延迟时间是随机的，那么您可以使用对
setTimeout（）
的重复调用，而不是
setInterval（）
并且您将为每个
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();
});

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

$(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();
});

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

$(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();
});

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

$(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();
});

$（函数（）{
canvas=document.getElementById（'scene'）；
ctx=canvas.getContext（'2d'）；
var circlescont=60；//我们将随机画60个圆
循环变异系数=15；
var width=canvas.width；
var height=canvas.height；
函数makeCircle（）{
var x=Math.random（）*宽度；
var y=Math.random（）*高度；
var c=新的圆（x，y，圆环）；
圆。推（c）；
牵引圈（ctx、c.x、c.y、圆环）；
if（圆圈长度<圆圈计数）{
setTimeout（makeCircle，randomBetween（1001000））；
}
}
makeCircle（）；
});

注意：在这两个代码块中，我通过查看circles.length重新构造了跟踪圈数的方式，因为它是一个自然的、预先存在的计数器，指示您创建了多少圈。
您需要重新构造代码（不能使用
for
循环），以便可以从
设置间隔（）中绘制每个圈
回调函数如下：

$(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();
});

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

$(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();
});

延迟时间的大小作为
setInterval（）
的第二个参数。我在这里设置了1000ms（1秒），但是您可以使用任何想要的值。如果您希望延迟时间是随机的，那么您可以使用对
setTimeout（）
的重复调用，而不是
setInterval（）
并且您将为每个
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();
});

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

$(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();
});

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

$(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();
});

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

$(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();
});

$（函数（）{
canvas=document.getElementById（'scene'）；
ctx=canvas.getContext（'2d'）；
var circlescont=60；//我们将随机画60个圆
循环变异系数=15；
var width=canvas.width；
var height=canvas.height；
函数makeCircle（）{
var x=Math.random（）*宽度；
var y=Math.random（）*高度；
var c=新的圆（x，y，圆环）；
圆。推（c）；
牵引圈（ctx、c.x、c.y、圆环）；
if（圆圈长度<圆圈计数）{
setTimeout（makeCircle，randomBetween（1001000））；
}
}
makeCircle（）；
});

注意：在这两个代码块中，我通过查看circles.length重新构造了跟踪圈数的方法，因为它是一个自然的、预先存在的计数器，指示您创建了多少个圈。
请包含不起作用的代码，并解释它是如何起作用的。控制台上的错误等。请包含不起作用的代码hat不起作用，并解释它是如何起作用的。控制台上的错误等。