setInterval ou timer perso

**Archimède** · 28/05/2023, 19h41

Salut, je me posais la question :
vaut-il mieux se faire un timer perso avec performance.now() et requestAnimationFrame() plutôt que setInterval ?
Je pencherais pour le timer perso avec la fonctionnalité de requestAnimationFrame() mais je ne sais pas comment setInterval est construit...

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<script>
        class Timer {
            constructor(callback, interval) {
                let ti = performance.now();
                let tf = 0,
                    dt = 0,
                    tick;
                let _enabled = true;
 
                function functimer() {
                    tf = performance.now();
                    dt = tf - ti;
                    if (dt >=interval) {
                        callback(dt);
                        ti=tf;
                    }
                    _enabled ? tick = window.requestAnimationFrame(functimer) : window.cancelAnimationFrame(tick);
                }
 
                Object.defineProperty(this, "enabled", {
                    get: function () {
                        return _enabled;
                    },
                    set: function (value) {
                        _enabled = value;
                    }
                });
                functimer();
            }
        }
 
       /*let  start=performance.now(),
            dt=0,
            end=0;*/
 
        const Ecoute = function (dt) {
            //end=performance.now();
            //dt=end-start;
            console.log(dt);
            //start=end;
        }
        //setInterval(Ecoute, 10);
        const timer = new Timer(Ecoute, 10);
    </script>
</body>
</html>

**Doksuri** · 29/05/2023, 09h15

attention : un requestAnimationFrame ne sera pas execute au meme moment qu'un code JS lambda (comme le setTimeout par exemple)

un setTimeout va "ajouter une nouvelle tache" a la queue de "l'event loop" avant le "render" (les styles calculations(css), layout (arbre du rendu), paint (pixel data) )

un requestAnimationFrame sera execute au debut du "render" (style calculation, layout & paint) (plusieures taches peuvent etre execute avant le declanchement du "render")

ce qu'il faut comprendre c'est que ni un setTimeout, ni un requestAnimationFrame ne seront "exactes" :
dans les 2 cas, il faudra attendre que le thread soit libere, donc il faut plutot voire ces methodes comme "execute ce quand a partir de xxx ms, des que t'as un moment de libre"
de plus, le requestAnimationFrame, sera calle sur les FPS de la machine (pour faire simple)

faire un timer perso oubien un setTimeout... je dirai que c'est beaucoup de code (et beaucoup de bugs potentiels) juste pour etre a la nanoseconde pres