J'utilise React pour refaire totalement mon site perso et je souhaite faire une animation ou une phrase apparait lettre par lettre. Bref, je me retrouve face à un problème, les fonctions setTimeout et setInterval ne fonctionnent pas.
Voici le code :
function AnimatedPhrases() {
let [word, setWord] = useState('')
let msg = "La phrase"
let msgCount = 0
function showLetters(){
while (msgCount < msg.length){
msgCount++
word = msg.substring(0, msgCount)
console.log(word)
let timeOut = setInterval(showLetters,200);
}
}
showLetters()
return (
<div>
<div className="bloc"></div>
<h2>{word}</h2>
</div>
);
}
export default AnimatedPhrases;
La fonction affiche bien lettre par lettre, (j'ai vérifié via la console) mais sans interval de temps, bref, cela va tellement vite qu'on ne voit pas l'apparition lettre par lettre à l'écran.
J'ai essayé d'augmenter le délai mais cela ne change rien non plus, bref incompréhension totale sur ce problème pourtant je suis même pas débutant en JS et la j'avoue que j'ai aucune idée de ce qui provoque cela.
J'ai utilisé de la même manière les fonctions setTimeout - interval dans un autre composant et cela fonctionne trés bien ... J'ai aussi testé sur différent navigateur, même problèmes sur tous.
Merci d'avance pour vos réponses ;)
- Edité par GuillaumeDavid12 22 septembre 2021 à 14:23:14
Essaye de bien indenter ton code, ça coute pas cher et ça le rends lisible. https://www.npmjs.com/package/prettier c'est sympa si tu as la flemme de faire manuellement la mise en page.
setWord, c'est pas inutile, tu es sensé utiliser cette fonction pour modifier word et non "word = ..."
Je ne sais pas si tu sais ce qu'es un interval, là tu exécute la fonction showletters, puis 200 ms plus tard tu l'exécute une nouvelle fois, puis 200 ms plus tard tu l'exécute 2 fois, puis 200 ms plus tard 4 fois, et ça continue de doubler toutes les 200ms jusqu'à la fin de ton mot. Ensuite la fonction est toujours exécutée x fois mais ne fais rien. Je ne crois pas que c'est ce que tu veux faire, un interval me semble plus appropriée (et du coup plus besoin du while).
C'est toujours mieux d'animer un élément qui existe, ce serais peut-être mieux d'utiliser useEffect.
Avec React, tous ce qui est timer, et addEventListener doivent être déclarées dans un useEffect, et ce genre de fonctions doivent être egalement nettoyées dans le useEffect pour éviter les fuites de mémoire.
Essaie comme ca pour voir, le code n'est pas très optimisé, mais c'est juste pour reprendre ton code:
function AnimatedPhrases() {
let [word, setWord] = useState("");
let msg = "La phrase";
let msgCount = 0;
function showLetters() {
if (msgCount < msg.length) {
msgCount++;
word = msg.substring(0, msgCount);
setWord(word);
setTimeout(showLetters, 300);
}
}
useEffect(() => {
showLetters();
}, []);
return (
<div>
<div className="bloc"></div>
<h2>{word}</h2>
</div>
);
}
Effectivement, j'ai mal compris setInterval qui en JS "classique" faisait ce que j'entendais (je suis plutôt du genre à lire en diagonal la doc et tester les choses moi même).
Ensuite, c'est effectivement l'utilisation de setWord et de useEffect qui a réglé le problème et je penses avoir compris pourquoi.
Encore merci à vous de m'avoir "débloqué".
SetTimeout - setInterval ne fonctionnent pas
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
La meilleure solution est toujours la plus simple. Ma chaîne Youtube [Tutos pour débutants]