在javascript中重置setInterval

我剛剛製作了一個版本的「10 PRINT」來嘗試開發我的JS技能。在javascript中重置setInterval

最後，我認爲這將是很好的添加一些滑塊，並讓觀衆調整一些參數，看看他們有什麼效果。

你可以看到我想出了這裏：10PRINT, by Boguz, on GitHub

一個我想補充改變動畫的速度滑塊，但我可以得到它的工作。

要觸發我用這樣的setInterval的動畫：

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

當文檔加載

let speed = 50;

，然後我試圖更新它的變速被初始化（當查看器移動滑塊）如下：

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

當我記錄速度變量ig在控制檯中輸入正確的值，但不知何故它沒有達到預期的效果。

如果您需要查看更多代碼，請詢問我，或者查看GitHub Repository。

任何幫助是非常歡迎。謝謝！

來源

2017-09-23 Boguz

在您的腳本中存儲setInterval值，以便您可以清除它。

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

在 resetDraw明確的時間間隔

然後和重新設置（現在將使用新的speed）

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

你也可以完全刪除初始setInterval，只是通話resetDraw一次啓動。

來源

2017-09-23 15:22:00

謝謝，這很好！ =） – Boguz

清除舊的一個第一，然後作出一個新的

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的間隔時間不能活的更新，它在當你讓它通話出爐。

來源

2017-09-23 15:16:32

在javascript中重置setInterval

回答

相關問題