一个页面中可以同时设置多少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>

var interval_1=setIntervalcallFunc1；，2000; 调用eval，这是邪恶的，所以它是坏的。使用此值代替var interval_1=SetIntervalCallFunc12000

对于这个问题，你可以想用多少就用多少，但是如果两个动作之间的间隔相同，你最好这样做

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

tl；博士：在你创造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个字节。

很好的解释，最终我了解了setTimeout的情况……我认为一次只能运行1个计时器，这是因为我使用警报命令对其进行了测试，当然，在这种情况下的一个例外是为什么eval是邪恶的和坏的？@Lazy：它阻止了大多数优化，因此比另一种方法慢得多。eval既不邪恶也不坏。将字符串传递给setTimeout进行求值而不是回调是错误的。@JohnWhite好的，让我重新表述一下。除非您希望执行直接依赖于输入的代码，否则使用eval可能会毫无理由地降低代码的速度和可读性。最重要的是？当然，如果你想使用eval，那是因为你还没有充分理解你要做什么和/或JavaScript。所以eval是邪恶的，它并不意味着无用，它只是很容易使用它，但除非你真的必须这样做，否则你不应该使用它。eval的这个用例很糟糕，因为它可以很容易地在没有eval的情况下重写。这是非常令人印象深刻的，我预期会有更大的开销。我担心一次100-200个计时器会被过度使用。