我必须使用至少 2 个 setTimeouts 和 1 个 setInterval。这是否依赖于所使用的浏览器或 JavaScript 引擎?
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 个字节。
在一个页面上,您可以根据需要同时运行任意多个 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>
您可以使用任意多个。 请记住 JavaScript 是单线程的,因此它们都不能并行执行。
var interval_1 = setInterval("callFunc1();",2000);
调用 eval()
,这是邪恶的,所以很糟糕。
用这个代替var interval_1 = setInterval(callFunc1,2000);
对于这个问题,你可以使用任意多个,但如果两个动作之间的间隔相同,你最好这样做
var interval = setInterval(function() {
// function1
fct1();
// function2
fct2();
},2000);
如果你在服务器上使用它们并使用 pm2,你将把它们多重化,它会在 Nodejs 中为你处理它。