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

前端未结

关注

 4  482

I have to use atleast 2 setTimeouts and 1 setInterval. Does this have any dependency on the browser or javascript engine being used?

相关标签:

4条回答

忘了有多久

2020-12-01 08:23
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);
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
广开言路

2020-12-01 08:25
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>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
礼貌的吻别

2020-12-01 08:29

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

0 讨论(0)
发布评论:

提交评论
- 加载中...
独厮守ぢ

2020-12-01 08:35
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...