Javascript循环仅在执行警报（）时有效

我正在使用javascript旋转木马，但我只能通过在while方法中添加一个alert（）来运行它，如下所示（然后在Chrome上单击忽略连续消息）。任何帮助或解释正在发生的事情都将不胜感激

$(document).ready(function() {
    var colors = ["#000000", "#FFFFFF", "#FFFFFF", "#FFFFFF"];
    var arc = Math.PI / 2;
    var ctx;
    var startAngle = 0;

    function drawWheel(startAngle) {
        var canvas = document.getElementById("wheel");
        if (canvas.getContext) { // Checks for browser support
            var outerRadius = 200,
                    innerRadius = 1;

            ctx = canvas.getContext("2d");

            ctx.strokeStyle = "black";
            ctx.lineWidth = 2;

            for(var i = 0; i < 4; i++) { // change to support size of wheel
                var angle = startAngle + i * arc;
                ctx.fillStyle = colors[i];

                ctx.beginPath();
                ctx.arc(250, 250, outerRadius, angle, angle + arc, false);
                ctx.arc(250, 250, innerRadius, angle + arc, angle, true);
                ctx.stroke();
                ctx.fill();
            }
        }
    }

    function clearWheel() {
        var canvas = document.getElementById("wheel");
        ctx = canvas.getContext("2d");
        ctx.clearRect(0,0,500,500);
    }

    var i = 0;

    while (i<=500) {
        // alert(i);
        drawWheel(i);
        i++;
    }
});

$（文档）.ready（函数（）{
var colors=[“#000000”、“#FFFFFF”、“#FFFFFF”、“#FFFFFF”]；
var arc=Math.PI/2；
var-ctx；
var-startAngle=0；
功能牵引轮（startAngle）{
var canvas=document.getElementById（“轮子”）；
if（canvas.getContext）{//检查浏览器支持
var outerRadius=200，
内半径=1；
ctx=canvas.getContext（“2d”）；
ctx.strokeStyle=“黑色”；
ctx.lineWidth=2；
对于（var i=0；i<4；i++）{//更改为车轮的支撑尺寸
var角度=星形缠结+i*弧；
ctx.fillStyle=颜色[i]；
ctx.beginPath（）；
ctx.弧（250，250，外层，角度，角度+弧，假）；
ctx.弧（250，250，内半径，角度+弧，角度，真值）；
ctx.stroke（）；
ctx.fill（）；
}
}
}
函数clearWheel（）{
var canvas=document.getElementById（“轮子”）；
ctx=canvas.getContext（“2d”）；
ctx.clearRect（0,0500）；
}
var i=0；
while（i我会在while循环中放置一个断点，以确保代码正在运行。
此警报不应对代码产生任何影响

附加调试器也可能会暴露一条禁止显示的错误消息，而在正常模式下运行时，您不会看到该消息