setTimeOut(function,time) 是否不断在函数堆栈上创建负载？

Question

我正在使用 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)
}

这个方法会不会像递归函数一样在函数栈上创建很多函数调用？

Answer 1

您可以通过 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>

Answer 2

您的优化解决方案实际上是会使程序崩溃的解决方案，因为它永远保持相同的功能运行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);

如您所见，它使用相同的方法，但专门设计用于尝试匹配用户屏幕的刷新率，使您不必定义渲染刻度之间的间隔。

setTimeOut(function,time) 是否不断在函数堆栈上创建负载？

Does setTimeOut(function,time) keeps creating load on function stack?

javascript

html

game-loop