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

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

javascript

一个页面中可以同时设置多少javascript setTimeout/setInterval调用？,javascript,settimeout,Javascript,Settimeout,我必须使用至少2个设置超时和1个设置间隔。这是否依赖于所使用的浏览器或javascript引擎你想用多少就用多少。请记住，JavaScript是单线程的，因此它们都不能并行执行。在一个页面上，您可以根据需要同时运行任意多个设置超时/设置间隔，但是为了单独控制每个设置，您需要将它们分配给一个变量 var interval_1 = setInterval("callFunc1();",2000); var interval_2 = setInterval("callFunc2();",1000);

我必须使用至少2个设置超时和1个设置间隔。这是否依赖于所使用的浏览器或javascript引擎

你想用多少就用多少。请记住，JavaScript是单线程的，因此它们都不能并行执行。

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

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>


函数addThing（）{
var newEle=document.createElement（“div”）；
newEle.innerHTML=“Timer1 Tick”；
文件.正文.附件（newEle）；
}   
var t1=setInterval（“addThing（）；”，1000）；
var t2=设定间隔（“警报（'moo'）；”，2000）；

var interval_1=setInterval（“callFunc1（）；”，2000）调用eval（）这是邪恶的，所以它是坏的。
改用这个var interval_1=setInterval（callfunc12000）
对于这个问题，你可以想用多少就用多少，但是如果两个动作之间的间隔相同，你最好这样做
var interval = setInterval(function() {
  // function1
  fct1(); 
  // function2
  fct2();
 },2000);

tl；博士：在你创造10万个计时器之前，不要担心计时器的成本
我刚刚通过创建这个测试文件对计时器性能进行了快速测试（一次又一次地创建100K计时器）：

变量n=0；//用于验证所有定时器点火的计数器
函数makeTimers（）{
var start=Date.now（）；
对于（变量i=0；i<100000；i++，n++）{
setTimeout（你好，5000）；
}
log（'Timers make in'，Date.now（）-start，'msecs'）；
}
函数hello（）{
如果（--n==0）{
console.log（“所有定时器都被触发”）；
makeTimers（）；//再做一次！
}
}
setTimeout（makeTimers，10000）；//开始测试前请稍等

我在大约2014年的Macbook Pro上用Google Chrome（v54）打开了这个文件，然后转到开发者工具中的时间线选项卡，记录了加载页面时的内存配置文件，并运行了3-4个测试周期
观察结果
计时器创建循环需要200毫秒。页面堆大小从3.5MB预测试开始，并在3.9MB时趋于稳定
结论
每个计时器的设置都需要大约0.002毫秒，并向JS堆添加了大约35个字节。
很好的解释，最终我了解了setTimeout的情况……我认为一次只能运行1个计时器，这是因为我使用alert命令对其进行了测试，当然，这在本例中是一个例外为什么eval（）是魔鬼和坏吗？@Lazy:它阻止了大多数优化，因此比另一种方法慢得多。eval
既不坏也不坏。将字符串传递给setTimeout
进行求值而不是回调是错误的。@JohnWhite好的，让我重新表述一下。“除非您想执行直接依赖于输入的代码，否则使用eval
可能会降低代码的速度，降低代码的可读性，这没有什么好的理由。大多数（所有？）情况下，如果您想使用eval
，那是因为您对要做的事情和/或JavaScript不够了解。”因此，eval
是邪恶的（这并不意味着无用，只是很容易使用它，但除非你真的必须这样做，否则你不应该使用它），而eval的这个用例是不好的，因为它可以很容易地在没有eval的情况下重写。这非常令人印象深刻，我预计会有更大的开销。我担心一次100-200个计时器会被过度使用。
<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>