JS如何在再次调用时停止先前而为true

Question

我正在尝试使用 JS 编写贪吃蛇游戏，所以我使用 SVG 渲染游戏并使用 JS 和循环移动绘制的部分

我的问题是我想保持渲染生活"while循环"，但每次我按一个新键来改变蛇的方向时，循环调用堆栈。

我试图寻找方法来阻止这种情况，但我不知道。

有没有人知道如何解决这个问题？

const changeDirection = async key => {
while(true){
move(key);
await sleep(10 * speed);
}
}

Answer 1

与跟踪间隔 ID 相比，使用持久运行的单个间隔可能更容易。调用changeDirection时，只需重新分配一个在间隔内引用的变量：

let key;
setInterval(() => {
if (key) {
move(key);
}
}, 10 * speed);
const changeDirection = (keyParam) => {
key = keyParam;
};

Answer 2

我通过使用setInterval找到了答案

let prevKey = // last key stroke
let prevID  = //Interval Id 
const changeDirection = async key => {
if(prevKey !== key){
clearInterval(prevID)
prevKey = key
}
prevID = setInterval( () => {
move(key);
}, 10 * speed)
}

通过保存上一个密钥和间隔 ID 并在发生新的有效密钥事件时清除间隔