1
votes

Comment effacer l'intervalle dans un composant fonctionnel si l'intervalle est défini dans une fonction?

Je sais que le démarrage d'un intervalle dans useEffect est facile à effacer comme ceci:

const startGame = () => {
  const interval = setInterval(some function, time);
}

useEffect(() => {
  startGame()
})

Mais que faire si je dois définir un intervalle dans une fonction, comment effacer l'intervalle dans ce cas, ou tout simplement je n'ai pas à le faire ??

useEffect(() => {
   const interval = setInterval(some function, time);
   return () => clearInterval(interval)
})

javascript reactjs

3 commentaires

Vous pouvez utiliser clearInterval (interval) n'importe où, que ce soit dans une fonction ou dans useEffect. Qu'est-ce que cela a à voir avec cela?

const interval = setInterval (interval); à l'intérieur de setInterval vous devez fournir un rappel pas la même affectation

@ABGR Je crée un jeu et je dois définir des intervalles qui devraient fonctionner au début du jeu dans une fonction!

3 Réponses :

1
votes

Utilisez ce code par exemple:

import React, { useEffect, useRef } from 'react';

const Timer = () => {
  
    let interval = useRef();
    const startGame = () => {
      interval.current  = setInterval(() => {
        // your code
      }, 1000)
    }
    
    useEffect(() => {
      startGame();
      return () => clearInterval(interval.current)
    })
 
    return (
      // your jsx code;
    );
};

export default Timer;

1 commentaires

const interval = setInterval (intervalle); à l'intérieur de setInterval, vous devez fournir un rappel pas la même affectation

1
votes

Vous pouvez utiliser le hook useEffect pour effacer l'intervalle

   import React, { useEffect } from "react";

    const Timer = () => {
      const interval = React.useRef();
      const startGame = () => {
        interval.current = setInterval(() => {
          //code
        }, 3000);
      };
      React.useEffect(() => {
        return () => {
          clearInterval(interval.current);
        };
      }, []);
    };
    
    export default Timer;

3 commentaires

et si j'ai plusieurs instructions setInterval ?

Vous pouvez les affecter à différentes propriétés de l'objet intervalle comme interval.a, interval.b et ainsi de suite, puis les effacer trop séparément

@CodeEagle Je ne suis pas trop sûr que cela disparaisse. Est-ce que ça marche? Ma préoccupation est principalement à ce sujet: lorsque vous clearInterval (interval.current); , vous effacez une valeur (disons peu importe, interval.current tient à ce moment-là, dites nombre 15. Mais ceux qui sont déjà assignés peuvent conduire à une boucle infinie. Un autre problème est que useEffect n'a pas de dépendance ici donc il ne sera pas appelé après le chargement initial.

1
votes

Je suppose que c'est ce que vous voulez:

var ctr = 0, interval = 0;
var startGame1 = () => {
  ctr++;
  clearInterval(interval);
  console.log("hello")
  if(ctr>=5){
    clearInterval(interval);
  }else{
   interval = setInterval(()=>{startGame1()}, 1000);
  }
}

startGame1()

2 commentaires

L'intervalle doit mettre à jour le jeu, donc aucune condition n'est nécessaire pour l'effacer dans le jeu, je dois l'effacer dans useEffect

Je pense que vous voulez vérifier la réponse de @ urvashi ci-dessus. Ça ne marche pas?