how many javascript setTimeout/ setInterval call can be set simultaneously in one page?_问答_开发者

how many javascript setTimeout/ setInterval call can be set simultaneously in one page?

开发者 https://www.devze.com 2022-12-25 01:08 出处：网络

I have to use atleast 2 setTimeouts and 1 setInterval. Does this have any dependency on the browser or javascript engine开发者_如何学运维 being used? tl;dr: Don\'t worry about the cost of timers until

I have to use atleast 2 setTimeouts and 1 setInterval. Does this have any dependency on the browser or javascript engine开发者_如何学运维 being used?

tl;dr: Don't worry about the cost of timers until you're creating 100K's of them.

I just did a quick test of timer performance by creating this test file (creates 100K timers over and over):

<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.

Observations

The timer creation loop takes 200ms. The page heap size starts at 3.5MB pre-test, and levels out at 3.9MB.

Conclusion

Each timer takes ~.002 msecs to set up, and adds about 35 bytes to the JS heap.

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.

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.

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.

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>

You can use as many as you want. Just remember that JavaScript is single threaded, so none of them can execute in parallel.

var interval_1 = setInterval("callFunc1();",2000); calls eval() which is evil so it's BAD. Use this instead 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);

how many javascript setTimeout/ setInterval call can be set simultaneously in one page?

精彩评论

关注公众号

热门标签

图文推荐

how many javascript setTimeout/ setInterval call can be set simultaneously in one page?

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：