理解一个接一个地执行 setTimeout() 函数

Question

我需要在固定的时间间隔内一个接一个地执行多个函数，因此使用了setTimeout。我想确保我了解它是如何执行的。我有以下逻辑：

setTimeout(function() {
  //Execute first function
}, 200);

setTimeout(function() {
  //Execute second function
}, 400);

setTimeout(function() {
  //Execute third function
}, 600);

这是否意味着第一个函数在 200 毫秒后执行，第二个函数在第一个函数后 200 毫秒后执行，第三个函数在第二个函数后 200 毫秒后执行，依此类推？或者我需要改变什么吗？

Answer 1

Does this mean that first function execute after 200ms, second one 200ms after first and third one 200ms after second and so on?

基本上，是的，这就是它的意思。但是请记住，the specification 仅保证延迟参数是必须等待的最小时间，并且浏览器有时可以并且确实会限制这些调用 - 特别是如果选项卡是不活跃：

Note: This API does not guarantee that timers will fire exactly on schedule. Delays due to CPU load, other tasks, etc, are to be expected.

和：

Optionally, wait a further user-agent defined length of time.

Note: This is intended to allow user agents to pad timeouts as needed to optimise the power usage of the device. For example, some processors have a low-power mode where the granularity of timers is reduced; on such platforms, user agents can slow timers down to fit this schedule instead of requiring the processor to use the more accurate mode with its associated higher power usage.

此外，如果您的任何函数需要很长时间才能到达运行，一个函数结束与下一个函数开始之间的延迟可能不会是 200 毫秒 - 它可能更短。

Answer 2

按照 James 的回答，为了保证这个最小延迟，您应该在匿名回调中触发下一个 setTimeout()，每个延迟 200 毫秒指定：

setTimeout(function() {
    //Execute first function

    setTimeout(function() {
        //Execute second function

        setTimeout(function() {
            //Execute third function
        }, 200);

    }, 200);

}, 200);

这样你就可以确定每个函数之间的延迟将是至少 200ms

理解一个接一个地执行 setTimeout() 函数

understanding execution of setTimeout() functions that follow one another

javascript

execution

settimeout