一个页面可以同时设置多少个javascript setTimeout/setInterval 调用?

问题描述 投票:0回答:5

我必须使用至少 2 个 setTimeouts 和 1 个 setInterval。这是否依赖于所使用的浏览器或 JavaScript 引擎?

javascript settimeout
5个回答
32
投票

tl;dr:在创建 10 万个计时器之前,不要担心计时器的成本。

我刚刚通过创建此测试文件对计时器性能进行了快速测试(一遍又一遍地创建 100K 个计时器):

<script>
var n = 0; // Counter used to verify all timers fire

function makeTimers() {
  var start = Date.now();
  for (var i = 0; i < 100000; i++, n++) {
    setTimeout(hello, 5000);
  }
  console.log('Timers made in', Date.now() - start, 'msecs');
}

function hello() {
  if (--n == 0) {
    console.log('All timers fired');
    makeTimers(); // Do it again!
  }
}

setTimeout(makeTimers, 10000);  // Wait a bit before starting test
</script>

我在大约 2014 年 Macbook Pro 上的 Google Chrome (v54) 中打开了这个文件,然后转到开发人员工具中的“时间轴”选项卡,记录页面加载时的内存配置文件并运行 3-4 个测试周期。

观察

定时器创建循环需要 200 毫秒。页堆大小从预测试的 3.5MB 开始,稳定在 3.9MB。

结论

每个计时器的设置时间约为 0.002 毫秒,并向 JS 堆添加约 35 个字节。


26
投票

在一个页面上,您可以根据需要同时运行任意多个 setTimeouts/setIntervals,但是为了单独控制每个设置,您需要将它们分配给一个变量。

var interval_1 = setInterval("callFunc1();",2000);
var interval_2 = setInterval("callFunc2();",1000);
clearInterval(interval_1);

上面的代码同样适用于setTimeout,只是替换了措辞。

正如 Kevin 所说,JavaScript 确实是单线程的,所以虽然你可以同时有多个计时器计时,但在任何一个时间只能触发一个计时器 - 例如,如果你有一个计时器触发一个在执行中“停止”的函数,例如带有警报框,那么我相信该 JS 必须“恢复”,然后另一个才能触发。

下面给出另一个例子。虽然标记无效,但它显示了超时是如何工作的。

<html>
    <body>
        <script type="text/javascript">
            function addThing(){
                var newEle = document.createElement("div");
                newEle.innerHTML = "Timer1 Tick";
                document.body.appendChild(newEle);
            }   
            var t1= setInterval("addThing();",1000);
            var t2 = setInterval("alert('moo');",2000);
        </script>
    </body>
</html>

13
投票

您可以使用任意多个。 请记住 JavaScript 是单线程的,因此它们都不能并行执行。


7
投票

var interval_1 = setInterval("callFunc1();",2000);
调用
eval()
,这是邪恶的,所以很糟糕。 用这个代替
var interval_1 = setInterval(callFunc1,2000);

对于这个问题,你可以使用任意多个,但如果两个动作之间的间隔相同,你最好这样做

var interval = setInterval(function() {
  // function1
  fct1(); 
  // function2
  fct2();
 },2000);

0
投票

如果你在服务器上使用它们并使用 pm2,你将把它们多重化,它会在 Nodejs 中为你处理它。

© www.soinside.com 2019 - 2024. All rights reserved.