web-dev-qa-db-fra.com

Combien d'appels JavaScript Settimeout / Seinterval peuvent être définis simultanément sur une page?

Je dois utiliser au moins 2 Settimeout et 1 seinterval. Cela a-t-il une dépendance sur le navigateur ou le moteur JavaScript utilisé?

javascriptsettimeout
26
rabbit

Sur une page, vous pouvez avoir autant de paramétrages de SetTimeouts/Stintervals en cours d'exécution à la fois comme vous le souhaitez, mais pour pouvoir contrôler chaque individuellement, vous devrez les attribuer à une variable.

var interval_1 = setInterval("callFunc1();",2000);
var interval_2 = setInterval("callFunc2();",1000);
clearInterval(interval_1);

Le même code ci-dessus s'applique à Settimeout, simplement remplacer le libellé.

Comme Kevin l'a dit, JavaScript est en effet unifaminé unique, alors que vous pouvez avoir plusieurs minuteries à la fois, un seul peut tirer à la fois, c'est-à-dire si vous en avez une fonction qui déclenche une fonction "s'arrête" dans l'exécution, par exemple avec Une boîte d'alerte, alors que JS doit être "repris" avant qu'un autre ne puisse déclencher, je crois.

Un autre exemple est donné ci-dessous. Bien que le balisage ne soit pas valide, cela montre la fonctionnement des délais d'attente.

<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>
22
Seidr

tL; DR: Ne vous inquiétez pas du coût des minuteries avant de créer 100k d'entre eux.

Je viens de faire un test rapide de performances de la minuterie en créant ce fichier de test (crée 100 000 minuteries de plus et plus):

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

J'ai ouvert ce fichier dans google Chrome (v54) sur mon circa ~ 2014 MacBook Pro, et est allé à l'onglet Timeline dans les outils de développement et enregistré le profil de mémoire comme la page chargée et couru à 3- 4 cycles du test.

Observations

La boucle de création de minuterie prend 200 ms. La taille de la page commence au pré-test de 3,5 Mo et à des niveaux de 3,9 Mo.

Conclusion

Chaque minuterie prend ~ .002 msec à installer et ajoute environ 35 octets au tas JS.

20
broofa

Vous pouvez utiliser autant que vous le souhaitez. Rappelez-vous simplement que JavaScript est un seul fileté, alors aucun d'entre eux ne peut s'exécuter en parallèle.

11
kemiller2002

var interval_1 = setInterval("callFunc1();",2000); Appelle eval() qui est le mal, alors c'est mauvais. Utilisez ceci à la place var interval_1 = setInterval(callFunc1,2000);

Et pour la question, vous pouvez utiliser autant que vous le souhaitez, mais si tous ont le même intervalle entre deux actions, vous feriez mieux de le faire de cette façon

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