자바 스크립트에서 setInterval 재설정

Question

방금 ​​JS 기술을 개발하기 위해 "10 PRINT"버전을 만들었습니다.

결국 나는 슬라이더를 추가하고 시청자가 매개 변수 중 일부를 조정하여 어떤 효과가 있는지 확인하는 것이 좋을 것이라고 생각했습니다. 내가 애니메이션의 속도를 변경 추가하고 싶었 슬라이더의 10PRINT, by Boguz, on GitHub

하나,하지만 난 그것을 작동시킬 수 있습니다

당신은 내가 여기에 와서 무엇을 볼 수 있습니다.

내가 이런 setInterval을 사용하고있는 애니메이션 트리거하려면 문서를로드

let speed = 50; 

다음은 내가 그것을 업데이트하려고 할 때 가변 속도가 초기화

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

을합니다 (뷰어는 다음과 같이 이동합니다.

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

내가 속도 변수 ig 콘솔에서 올바른 값을 얻지 만, 어쨌든 원하는 결과가 없습니다.

더 많은 코드가 필요하면 저에게 질문하거나 GitHub Repository을 살펴보십시오.

도움을 주셔서 감사합니다. 감사합니다.

Answer 1

스크립트에 setInterval 값을 저장하여 지울 수 있습니다.

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

당신의 resetDraw 명확 간격에서 다음

하고 다시 설정 (지금 새로운 speed 사용합니다) 또한 완전히 초기 setInterval 그냥 전화를 제거 할 수

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

---

을 한 번 시작하려면 resetDraw.

Answer 2

지우기 이전 먼저, 다음은 당신이 그것을 만드는 호출에 구운 것, 새로운

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); 
} 

setInterval에 전달되는 시간 간격은 라이브 업데이트 할 수 없습니다합니다.