Plusieurs opérateurs ternaire ou un seul if() else ?

**jpagnol** · 29/04/2021, 16h28

Bonjour, actuellement je code quelques fonctions Js pour un site que je dois restaurer et j'en suis venu à me poser une question pendant que j'en écrivait une.

Pour le contexte, cette fonction permet, quand je clique sur un bouton, d'arrêter une animation et de modifier l'apparence de ce dernier.
En gros j'ai un texte qui défile (une sorte de <marquee>) avec un bouton play/stop.

Donc dans ma fonction JS (avec le code ci-dessous), je vérifie si l'animation est en route puis, en fonction du résultat de cette condition, je modifie l'état de l'animation et l'image du bouton en conséquence.

En fait j'hésite sur la structure de mon algorithme. J'hésite entre :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
 
function pause_continue_text(){
    let marquee = document.querySelector('#marquee > div');
    let button = document.querySelector('#marquee_button');
 
    if(marquee.getAnimations()[0]['playState'] === 'running'){
        marquee.style.animationPlayState = 'paused';
        button.setAttribute('src', 'images/m_play.gif');
    }
    else{
        marquee.style.animationPlayState = 'running';
        button.setAttribute('src', 'images/m_stop.gif');
    }
}

Et :

Code :

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

1
2
3
4
5
6
7
8
 
function pause_continue_text(){
    let marquee = document.querySelector('#marquee > div');
    let button = document.querySelector('#marquee_button');
 
    marquee.style.animationPlayState = (marquee.getAnimations()[0]['playState'] === 'running') ? 'paused': 'running';
    button.src = (marquee.getAnimations()[0]['playState'] === 'running') ? 'images/m_stop.gif': 'images/m_play.gif';
}

Sachant que pour la version avec les opérateurs ternaires je prévoit de créer une sous fonction pour expliciter la condition.
Je me dis que les deux versions sont valables mais j'aimerais bien avoir l'avis d'autres personnes.

Merci d'avance

**mathieu** · 29/04/2021, 18h37

la différence entre ces écritures ne change pas grand chose aux niveaux des ressources utilisées. donc pour faire votre choix, demandez vous quel code sera le plus compréhensible quand vous allez le relire dans 6 mois.
vous pouvez aussi faire ça par exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
function pause_continue_text()
{
    let marquee = document.querySelector('#marquee > div');
    let button = document.querySelector('#marquee_button');
 
 
	let etat_running = marquee.getAnimations()[0]['playState'] === 'running';
 
	marquee.style.animationPlayState = (etat_running) ? 'paused' : 'running';
    button.src = 'images/' + (etat_running ? 'm_stop.gif' : 'm_play.gif');
 
}