setTimeOut(function,time) 是否不断在函数堆栈上创建负载?
Does setTimeOut(function,time) keeps creating load on function stack?
我正在使用 JavaScript 和 HTML 在我的网页上制作贪吃蛇游戏。在这个游戏中,我想在固定的时间间隔后调用一个函数。此函数将更新并打印蛇的位置。
为此我正在使用 setTimeOut(my_function,time).
我的代码是这样的
function my_function(){
// update values
// display snake
setTimeOut(my_function,time)
}
我的问题是 - 上面的代码是否会像递归函数一样在函数堆栈上创建大量函数调用。我觉得会的。
以下是我认为可以优化的方法。
function empty_function{
}
while(true){
//update values
//display snake
setTimeOut(empty_function,time)
}
这个方法会不会像递归函数一样在函数栈上创建很多函数调用?
您可以通过 setInterval
更轻松地实现此目的。这是一个示例;
setTimeout(() => {console.log('this will get printed only once after 1000 ms')}, 1000);
setInterval(() => {console.log('this will get printed after every 1000 ms')}, 1000);
setInterval
在给定的时间间隔后一次又一次地运行函数。
如果你想停止setInterval
功能,你可以这样做;
let myinterval = setInterval(() => {console.log('Print this again and again after 1000 ms')}, 1000);
// Down here i am clearing the 'myInterval' interval using the 'clearInterval' function.
const clear = () => {
console.log('printing stopped');
clearInterval(myinterval);
}
document.getElementById('stop').addEventListener('click', clear);
<button id='stop'>Stop printing</button>
您的优化解决方案实际上是会使程序崩溃的解决方案,因为它永远保持相同的功能 运行ning。您的第一种方法非常好:setTimeout
不会立即调用该函数,而是将其安排为 运行。与此同时,您的进程可以处理其他事件,并在您的函数要被调用时从一个新堆栈开始。
在无限 while
循环中,您的函数将永远不会被调用,因为程序永远不会有时间检查其计划任务列表。
如果您的时间间隔是基于帧的(例如,您希望尽可能频繁地更新图形),您最好使用 requestAnimationFrame():
function update(timestamp) {
// render your game
// request this function to be run again on the next frame:
window.requestAnimationFrame(update);
}
window.requestAnimationFrame(update);
如您所见,它使用相同的方法,但专门设计用于尝试匹配用户屏幕的刷新率,使您不必定义渲染刻度之间的间隔。
我正在使用 JavaScript 和 HTML 在我的网页上制作贪吃蛇游戏。在这个游戏中,我想在固定的时间间隔后调用一个函数。此函数将更新并打印蛇的位置。
为此我正在使用 setTimeOut(my_function,time).
我的代码是这样的
function my_function(){
// update values
// display snake
setTimeOut(my_function,time)
}
我的问题是 - 上面的代码是否会像递归函数一样在函数堆栈上创建大量函数调用。我觉得会的。
以下是我认为可以优化的方法。
function empty_function{
}
while(true){
//update values
//display snake
setTimeOut(empty_function,time)
}
这个方法会不会像递归函数一样在函数栈上创建很多函数调用?
您可以通过 setInterval
更轻松地实现此目的。这是一个示例;
setTimeout(() => {console.log('this will get printed only once after 1000 ms')}, 1000);
setInterval(() => {console.log('this will get printed after every 1000 ms')}, 1000);
setInterval
在给定的时间间隔后一次又一次地运行函数。
如果你想停止setInterval
功能,你可以这样做;
let myinterval = setInterval(() => {console.log('Print this again and again after 1000 ms')}, 1000);
// Down here i am clearing the 'myInterval' interval using the 'clearInterval' function.
const clear = () => {
console.log('printing stopped');
clearInterval(myinterval);
}
document.getElementById('stop').addEventListener('click', clear);
<button id='stop'>Stop printing</button>
您的优化解决方案实际上是会使程序崩溃的解决方案,因为它永远保持相同的功能 运行ning。您的第一种方法非常好:setTimeout
不会立即调用该函数,而是将其安排为 运行。与此同时,您的进程可以处理其他事件,并在您的函数要被调用时从一个新堆栈开始。
在无限 while
循环中,您的函数将永远不会被调用,因为程序永远不会有时间检查其计划任务列表。
如果您的时间间隔是基于帧的(例如,您希望尽可能频繁地更新图形),您最好使用 requestAnimationFrame():
function update(timestamp) {
// render your game
// request this function to be run again on the next frame:
window.requestAnimationFrame(update);
}
window.requestAnimationFrame(update);
如您所见,它使用相同的方法,但专门设计用于尝试匹配用户屏幕的刷新率,使您不必定义渲染刻度之间的间隔。