Löschen Sie den noch laufenden JS-Code

Question

Der JS-Code wird auch dann weiter ausgeführt, wenn das Element von der Seite entfernt wird.

Verwenden Sie den react-js 编码时的第一个困难。因为页面没有重新加载，所以初始脚本仍在运行，如 setInterval、websocket、etc-Code. Im folgenden einfachen Beispiel wurden die Elemente entfernt, es wird jedoch weiterhin ausgeführt. Es funktioniert nicht, wenn ich mit globalen Variablen erstellen muss

<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

你不能仅仅删除 <script> 节点，你必须做一些更具体的清理。

setInterval 返回一个间隔 ID，您可以将其传递给 clearInterval 以停止它。

一般来说，我想说你的代码在 React 上下文中没有多大意义，但在你的情况下，你可以这样做：

create new js
remove js

Answer 2

这是一个 React 问题，下面是在 React 组件中使用 setInterval 的示例。如果您使用某种形式的 React Router，下面的代码也将正确卸载/安装等。

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();