Любая идея, как остановить этот цикл?

Question

function draw(x, y) 
 
{ 
 
    var canvas = document.getElementById('canvas'); 
 
    var ctx = canvas.getContext('2d'); 
 
    ctx.save(); 
 
    ctx.fillStyle = "rgba(0,110,150,1)"; 
 
    ctx.fillRect (x, 370, 20, 20); 
 
    ctx.restore(); 
 
    x += 41; 
 
    var loop = setTimeout('draw('+x+','+y+')',70); 
 
} 
 

 
draw(10, 20);

.d{ 
 
    width: 93%; 
 
    height: auto; 
 
    z-index: 1; 
 
    position: absolute; 
 
}

<canvas id="canvas" class="d" width="1838" height="1050"></canvas>

Answer 1

loop потребности быть вне области видимости функции. Затем вызов clearTimeout на нем остановит цикл.

var loop; 
function draw(x,y) { 
    ... 
    loop = setTimeout (...); // no "var" 
    ... 
} 
... 
draw (0,0); 
setTimeout (function() { 
    clearTimeout (loop); 
}, 5000); // will stop the loop after 5 seconds 

Answer 2

Сейчас draw() является всегда вызов функции draw(). Для того, чтобы остановить это добавить if перед вызовом draw():

function draw(x, y) 
 
{ 
 
    var canvas = document.getElementById('canvas'); 
 
    var ctx = canvas.getContext('2d'); 
 
    ctx.save(); 
 
    ctx.fillStyle = "rgba(0,110,150,1)"; 
 
    ctx.fillRect (x, 370, 20, 20); 
 
    ctx.restore(); 
 
    x += 41; 
 

 
    // Only add another dot if there are fewer than 20 dots 
 
    if (x < 800) 
 
     setTimeout(function() { draw(x, y) }, 70); 
 
} 
 

 
draw(10, 20);

.d { 
 
    width: 93%; 
 
    height: auto; 
 
    z-index: 1; 
 
    position: absolute; 
 
}

<canvas id="canvas" class="d" width="1838" height="1050"></canvas>

---

Возможно немного яснее, но более продвинутая, решение может быть использование setInterval(), который запускает функцию каждый п секунд (вместо setTimeout(), который запускает его только один раз после n секунд:

function draw(x, y) {  
 
    var canvas = document.getElementById('canvas'); 
 
    var ctx = canvas.getContext('2d'); 
 

 

 
    var loop = setInterval(function() { 
 
     // setInterval() returns an indentifier for the timer; we can cancel 
 
     // the interval with clearInterval() 
 
     if (x > 800) 
 
      clearInterval(loop) 
 
     ctx.save(); 
 
     ctx.fillStyle = "rgba(0,110,150,1)"; 
 
     ctx.fillRect(x, 370, 20, 20); 
 
     ctx.restore(); 
 
     x += 41; 
 
    }, 70) 
 
} 
 

 
draw(10, 20);

.d { 
 
    width: 93%; 
 
    height: auto; 
 
    z-index: 1; 
 
    position: absolute; 
 
}

<canvas id="canvas" class="d" width="1838" height="1050"></canvas>

Как вы можете видеть, это немного более эффективным, так как нам не нужно, чтобы получить canvas и ctx каждый раз.