Javascript FOR循环，“var i = 0”，循环按预期运行。然而变量被重置为0，并且循环永远不会结束

问题描述：

的index.htmlJavascript FOR循环，“var i = 0”，循环按预期运行。然而变量被重置为0，并且循环永远不会结束

<!DOCTYPE html> 
<html lang="en" id="hypertext"> 
<head> 
    <meta charset="utf-8"> 
</head> 
<body onload="init();"> 
    <div id="Canvas_Container"> 
     <canvas id="Canvas_1"></canvas> 
    </div> 
</body> 
<script type="text/javascript" src="index.js"></script> 
</html>

index.js

var canvas_width = screen.availWidth; 
var canvas_height = screen.availHeight; 
var canvas_div = window.document.getElementById("Canvas_Container"); 
canvas_div.innerHTML = "<canvas id='Canvas_1' width='"+canvas_width+"' height='"+canvas_height+"'></canvas>"; 
var hypertext = document.getElementById("hypertext"); 
var canvas = document.getElementById("Canvas_1"); 
var context = canvas.getContext("2d"); 
var init = function() { 
    for (var i = 0; i <= 2; i++) { 
     var circle_x = Math.random() * canvas_width 
     var circle_y = Math.random() * canvas_height 
     var circle = { 
     "x": circle_x, 
     "y": circle_y, 
     "radius": 5, 
     "fill": "#000000" 
     } 
    } 
    if (canvas.getContext) { 
     context.beginPath(); 
     context.arc(circle.x,circle.y,circle.radius,0,2*Math.PI); 
     context.fillStyle = circle.fill; 
     context.fill(); 
     requestAnimationFrame(init); 
    } 
console.log(i) 
}

正如你可以看到我用HTML5画布瞎搞。我更早地记录了变量，并且我看到变量达到了由for循环设置的限制，然后出于某种奇怪的原因将其重置为0，因此无限创建了圆，并且浏览器崩溃。我真的很挠脑袋，想知道这个有什么问题。任何帮助，将不胜感激，我是这个整个JavaScript的东西很新。

你觉得'requestAnimationFrame（init）''是做什么的？ – Paulpro

你在'60fps'运行'init'函数。而且，对于日志记录，'i'变量记录为'3'，而不是'0'。 – Cristy

是啊，我现在觉得很傻。由于我不知道它做了什么，我应该可能已经考虑过了。 – user6744286

答

您每次调用requestAnimationFrame时都重置for循环;

var init = function() { 
    for(var i = 0; i <= 2; i++) { 
     requestAnimationFrame(paint); 
    }  
} 

function paint() {  
    var circle_x = Math.random() * canvas_width 
    var circle_y = Math.random() * canvas_height 
    var circle = { 
     "x": circle_x, 
     "y": circle_y, 
     "radius": 5, 
     "fill": "#000000" 
    } 
    if (canvas.getContext) { 
     context.beginPath(); 
     context.arc(circle.x,circle.y,circle.radius,0,2*Math.PI); 
     context.fillStyle = circle.fill; 
     context.fill();   
    }  
}

Javascript FOR循环，“var i = 0”，循环按预期运行。然而变量被重置为0，并且循环永远不会结束

相关推荐