Supprimez le code js qui est toujours en cours d'exécution

Question

Le code js continuera à s'exécuter même si l'élément est supprimé de la page.

Utilisez le code react-js 编码时的第一个困难。因为页面没有重新加载，所以初始脚本仍在运行，如 setInterval、websocket、etc. L'exemple simple ci-dessous présente les éléments supprimés mais est toujours en cours d'exécution. Cela ne fonctionne pas si je dois créer en utilisant des variables globales

<button onclick="createNewJsCode()">create new js</button>
<button onclick="removeJsCode()">remove js</button>
<script>
  let id = ''
  function createNewJsCode(){
    let s = document.createElement('script')
    let code = 'setInterval(`console.log(new Date())`,500)'
    s.id = (id = crypto.randomUUID())
    s.appendChild(document.createTextNode(code));
    document.body.appendChild(s);
  }
  function removeJsCode(){
    document.getElementById(id).remove()
  }
</script>

Answer 1

Vous ne pouvez pas simplement supprimer <script> nœuds, vous devez effectuer un nettoyage plus spécifique.

setInterval 返回一个间隔 ID，您可以将其传递给 clearInterval pour l'arrêter.

De manière générale, je dirais que votre code n'a pas beaucoup de sens dans un contexte React, mais dans votre cas, vous pouvez faire ceci :

create new js
remove js
sssccc

Answer 2

Il s'agit d'une question React, voici un exemple d'utilisation de setInterval dans un composant React. Si vous utilisez une forme de React Router, le code ci-dessous désinstallera/installera également correctement, etc.

const {useState, useEffect} = React;

function Page() {
  const [counter, setCounter] = useState(0);
  useEffect(() => {
    const i = setInterval(() => {
       console.log(new Date());
       setCounter(c => c +1);
    }, 1000);
    return () => {
      console.log('umount');
      clearInterval(i);
    }
  }, []);
  return 

    This is a page, and when unmounted will end the setInterval. 
Counter: {counter}, time: {new Date().toLocaleString()}
 Check console you will also see console logging of datetime finishes.
  
}

function OtherInfo() {
  return 

    Notice how the timer stopped inside the console.  
  If you click Show Page the component will be mounted again, this is kind of the basis of how React Router works in a Single Page Application (SPA).
  
}

function App() {
  const [pageVis, setPageVis] = useState(true);
  return 

    {pageVis && }
    {!pageVis && }
    

    {pageVis &&  setPageVis(false)}>Unmount Page}
    {!pageVis &&  setPageVis(true)}>Show Page}
  
}


const root = ReactDOM.createRoot(document.querySelector('#mount'));
root.render();

sssccc
sssccc