在一页中可以同时设置多少个 javascript setTimeout/setInterval 调用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2553138/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how many javascript setTimeout/ setInterval call can be set simultaneously in one page?
提问by rabbit
I have to use atleast 2 setTimeouts and 1 setInterval. Does this have any dependency on the browser or javascript engine being used?
我必须至少使用 2 个 setTimeouts 和 1 个 setInterval。这对正在使用的浏览器或 javascript 引擎有任何依赖性吗？
回答by Seidr
On a page you can have as many setTimeouts/setIntervals running at once as you wish, however in order to control each individually you will need to assign them to a variable.
在一个页面上，您可以根据需要同时运行多个 setTimeouts/setIntervals，但是为了单独控制每个，您需要将它们分配给一个变量。
var interval_1 = setInterval("callFunc1();",2000);
var interval_2 = setInterval("callFunc2();",1000);
clearInterval(interval_1);
The same code above applies to setTimeout, simply replacing the wording.
上面相同的代码适用于 setTimeout，只是替换了措辞。
As Kevin has stated, JavaScript is indeed single threaded, so while you can have multiple timers ticking at once, only one can fire at any one time - i.e. if you have one that fires a function which 'halts' in execution, for example with an alert box, then that JS must be 'resumed' before another can trigger I believe.
正如 Kevin 所说，JavaScript 确实是单线程的，因此虽然您可以同时让多个计时器滴答作响，但在任何时候都只能触发一个 - 即如果您有一个触发“停止”执行的函数，例如一个警报框，那么在我相信另一个可以触发之前，必须“恢复”该 JS。
One further example is given below. While the markup is not valid, it shows how timeouts work.
下面给出另一个例子。虽然标记无效，但它显示了超时的工作原理。
<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>
回答by broofa
tl;dr: Don't worry about the cost of timers until you're creating 100K's of them.
tl;dr：在创建 10 万个计时器之前，不要担心计时器的成本。
I just did a quick test of timer performance by creating this test file (creates 100K timers over and over):
我只是通过创建此测试文件（一遍又一遍地创建 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>
I opened this file in Google Chrome (v54) on my circa ~2014 Macbook Pro, and went to the Timeline tab in Developer Tools and recorded the memory profile as the page loaded and ran thru 3-4 cycles of the test.
我在大约 2014 年左右的 Macbook Pro 上在 Google Chrome (v54) 中打开了这个文件，然后转到开发人员工具中的时间轴选项卡，并在页面加载并运行 3-4 个测试周期时记录内存配置文件。
Observations
观察
The timer creation loop takes 200ms. The page heap size starts at 3.5MB pre-test, and levels out at 3.9MB.
计时器创建循环需要 200 毫秒。页堆大小从测试前的 3.5MB 开始，然后稳定在 3.9MB。
Conclusion
结论
Each timer takes ~.002 msecs to set up, and adds about 35 bytes to the JS heap.
每个计时器需要大约 .002 毫秒来设置，并向 JS 堆添加大约 35 个字节。
回答by kemiller2002
You can use as many as you want. Just remember that JavaScript is single threaded, so none of them can execute in parallel.
您可以根据需要使用任意数量。请记住，JavaScript 是单线程的，因此它们都不能并行执行。
回答by xavierm02
var interval_1 = setInterval("callFunc1();",2000);calls eval()which is evil so it's BAD.
Use this instead var interval_1 = setInterval(callFunc1,2000);
var interval_1 = setInterval("callFunc1();",2000);调用eval()这是邪恶的，所以它很糟糕。改用这个var interval_1 = setInterval(callFunc1,2000);
And for the question, you may use as many as you want but if all have the same interval between two actions, you better do it this way
对于这个问题，您可以使用尽可能多的次数，但如果两个动作之间的间隔相同，则最好这样做
var interval = setInterval(function() {
// function1
fct1();
// function2
fct2();
},2000);
