reset setInterval in Javascript

Question

Ich habe gerade eine Version der "10 PRINT" gemacht, um zu versuchen, meine JS Fähigkeiten zu entwickeln.

Am Ende dachte ich, es wäre schön, einige Schieberegler hinzuzufügen und die Zuschauer einige der Parameter anzupassen, um zu sehen, welchen Effekt sie haben.

können Sie sehen, was ich mit hier kam: 10PRINT, by Boguz, on GitHub

Einer der Schieber i ändert sich die Geschwindigkeit der Animation hinzufügen wollte, aber ich kann es an die Arbeit.

der Animation auslösen ich eine setInterval wie diese bin mit:

setInterval(function(speed){ 
    draw(); 
}, speed); 

Die variable Geschwindigkeit initialisiert wird, wenn die Dokument Lasten

let speed = 50; 

und dann habe ich es zu aktualisieren, ich versuche, (wenn die Zuschauer bewegt den Schieberegler) so:

const speedControl = document.querySelector("#speed-slider"); 
speedControl.oninput = function() { 
    let speedVal = speedControl.value; 
    speed = Number(speedVal); 
    resetDraw(); 
} 

Wenn ich die Geschwindigkeitsvariable ig und die richtigen Werte in der Konsole, aber irgendwie hat es nicht den gewünschten Effekt.

Wenn Sie mehr Code sehen müssen, fragen Sie mich, oder werfen Sie einen Blick auf die GitHub Repository.

Jede Hilfe ist sehr willkommen. Vielen Dank!

Answer 1

In Ihrem Skript speichern Sie den setInterval Wert, damit Sie es löschen können.

// SET INTERVAL 
let drawInterval = setInterval(function(){ 
     draw(); 
}, speed); 

dann in Ihrem resetDraw klar Intervall und wieder es gesetzt (es jetzt die neuen speed verwenden)

function resetDraw() { 
    context.clearRect(0, 0, canvas.width, canvas.height); 
    xpos = 0; 
    ypos = 0; 
    draw(); 
    clearInterval(drawInterval); 
    drawInterval = setInterval(draw, speed); 
} 

---

Sie könnten auch die anfänglichen setInterval und einfach Aufruf vollständig entfernen die resetDraw einmal zu starten.

Answer 2

löschen Ihre alte erste, machen dann eine neue

function makeInterval(speed) { 
    const intervalId = setInterval(function(){ 
     draw(); 
    }, speed); 
    return intervalId; 
} 


let intervalId = makeInterval(speed); 

...oninput = function() { 
    clearInterval(intervalId); 
    let speedVal = speedControl.value; 
    speed = Number(speedVal); 
    intervalId = makeInterval(speedVal); 
} 

Die Intervallzeit zu setInterval geben kann nicht leben aktualisiert werden, es gebacken ist in dem Ruf, wenn Sie es machen.