Padamkan kod js yang masih berjalan

Question

Kod js akan terus berjalan walaupun elemen dialih keluar daripada halaman.

Gunakan kod react-js 编码时的第一个困难。因为页面没有重新加载，所以初始脚本仍在运行，如 setInterval、websocket、etc. Contoh mudah di bawah telah mengeluarkan elemen tetapi masih berjalan. Ia tidak berfungsi jika saya perlu mencipta menggunakan pembolehubah global

<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

Anda tidak boleh memadamkan <script> nod sahaja, anda perlu melakukan pembersihan yang lebih khusus.

setInterval 返回一个间隔 ID，您可以将其传递给 clearInterval untuk menghentikannya.

Secara amnya, saya akan katakan kod anda tidak begitu masuk akal dalam konteks React, tetapi dalam kes anda, anda boleh melakukan ini:

create new js
remove js
sssccc

Answer 2

Ini ialah soalan React, berikut adalah contoh penggunaan setInterval dalam komponen React. Jika anda menggunakan beberapa bentuk React Router, kod di bawah juga akan menyahpasang/memasang dsb dengan betul.

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