Question

我刚刚制作了一个版本的“10 PRINT”来尝试开发我的JS技能。

最后，我认为添加一些滑块并让观众调整一些参数以查看它们的效果会很好。

你可以在这里看到我的想法：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();
}

当我记录速度变量时，我在控制台中获得正确的值，但不知何故它没有达到预期的效果。

如果您需要查看更多代码，请与我联系，或者查看GitHub Repository。

非常欢迎任何帮助。谢谢！

Answer 1

先清除旧的，然后再换一个新的

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的间隔时间无法实时更新，而是在您拨打电话时接听电话。

Answer 2

在脚本中存储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一次即可。

在javascript中重置setInterval

2 个答案: