除非在Javascript中删除for循环，为什么interval函数不会执行
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了除非在Javascript中删除for循环，为什么interval函数不会执行相关的知识，希望对你有一定的参考价值。
在下面的代码中，每次调用函数clearRect（）时，每隔50毫秒就删除画布上绘图的前一个渲染，但是只有在从“moveVerts（）”中删除用于绘制顶点的for循环时才能使用。包括循环在内的结果是，即使调用函数来清除画布2d上下文，新图形也会渲染在上一个图形的顶部。第一次尝试javascript。
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var xCoord = [0, 176, 220, 259, 284, 310, 317, 310, 289, 262, 244, 219, 0, 0, 156, 198, 231, 246, 246, 231, 209, 182, 145, 0];
var yCoord = [0, 0, 8, 24, 45, 87, 133, 176, 214, 240, 251, 262, 262, 240, 240, 227, 200, 165, 116, 89, 72, 63, 59, 59];
var numCoord = xCoord.length;
ctx.beginPath();
ctx.lineWidth = "0";
ctx.strokeStyle = "black";
ctx.moveTo(0, 0);
for ( i = 0; i < numCoord; i++) {
ctx.lineTo(xCoord[i], yCoord[i]);
}
ctx.closePath();
ctx.stroke();
setInterval("moveVerts()", 50)
// make it squiggle
function moveVerts() {
var mScale = (Math.random() - .5) * 12;
ctx.clearRect(0, 0, c.width, c.height);
for ( i = 0; i < numCoord; i++) {
ctx.lineTo(xCoord[i] + mScale, yCoord[i] + mScale);
}
ctx.closePath();
ctx.stroke();
}<canvas id="canvas" width=350 height=350></canvas>答案
你忘了打电话
ctx.beginPath();
在你的moveVerts功能。如果没有，画布会保留您正在绘制的路径，每次都会添加新行，然后描绘整个行。
固定代码（也是其他人提到的东西）：
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var xCoord = [0, 176, 220, 259, 284, 310, 317, 310, 289, 262, 244, 219, 0, 0, 156, 198, 231, 246, 246, 231, 209, 182, 145, 0];
var yCoord = [0, 0, 8, 24, 45, 87, 133, 176, 214, 240, 251, 262, 262, 240, 240, 227, 200, 165, 116, 89, 72, 63, 59, 59];
var numCoord = Math.min(xCoord.length, yCoord.length);
ctx.lineWidth = "0";
ctx.strokeStyle = "black";
moveVerts();
setInterval(moveVerts, 50);
// make it squiggle
function moveVerts() {
var mScale = (Math.random() - .5) * 12;
ctx.clearRect(0, 0, c.width, c.height);
ctx.beginPath();
//^^^^^^^^^^^^^^^^
ctx.moveTo(xCoord[0] + mScale, yCoord[0] + mScale);
for (var i = 1; i < numCoord; i++) {
ctx.lineTo(xCoord[i] + mScale, yCoord[i] + mScale);
}
ctx.closePath();
ctx.stroke();
}<canvas id="canvas" width=350 height=350></canvas>另一答案
您的变量i被声明为全局变量。尝试使用let。示例（令i = 0; i <numCoord; i ++）
以上是关于除非在Javascript中删除for循环，为什么interval函数不会执行的主要内容，如果未能解决你的问题，请参考以下文章
javascript中数组元素删除方法splice，用在for循环中巨坑
如何删除在 JavaScript 循环中连接字符串时添加的额外字符？ [复制]