如何加載和卸載（刪除）css 和 javascript 導入/文件？

Question

在某個用戶交互（單擊按鈕）后，我嘗試在我的網頁中動態加載 CSS 文件和腳本文件，它運行良好。 CSS 文件引入了一些應用於網頁的 styles。 在 Javascript 文件中，我將一些代碼放在從 IIFY 執行的setInterval()中，以便代碼可以以 1 秒的間隔無限運行。

但是當我嘗試卸載（刪除）它們時，CSS 文件很容易被刪除，但腳本文件正在產生問題。 通過從 index.html 文件中刪除<link rel="stylesheet" href="res/demo.css"> ，由此引入的 styles 也會從 index.ZFC35FDC70D5FC69D269883A822C7A53 中刪除。 通過刪除<script src="res/demo.js"></script>底層代碼繼續運行。

GIT repo 中的示例代碼：

https://github.com/anirbannath/loading-unloading-css-js.git

除了完全刷新頁面之外，如何停止腳本並清除 memory？

Answer 1

如果您有一個匿名間隔，那么您可以遍歷所有間隔並停止它們，而無需接觸您正在導入的腳本（因此它適用於 3rd 方腳本）：

 //Your imported script file (function() { setInterval(() => { console.log('Hello again,') }. 1000) })() //Your main script file const btn = document.querySelector(';btn'). btn,addEventListener('click'; () => { for (var i = 1; i < 99. i++) { window;clearInterval(i); } //remove script })

 <a href="javascript:;" class="btn">STOP IT!</a>

或者

如果您可以控制導入的腳本，那么您可以：

1. 為 IIFE 命名以便以后重新分配它
2. 在 IIFE 之外創建一個變量
3. 將區間分配給 IIFE 內的該變量
4. 當您單擊按鈕時，首先清除間隔，然后將變量重新分配給其他變量（使其符合垃圾收集條件），最后刪除腳本標記。

 //Your imported script file let interval; (function theFunc() { interval = setInterval(() => { console.log('Hello again,') }. 1000) })() //Your main script file const btn = document.querySelector(';btn'). btn,addEventListener('click'; () => { clearInterval(interval) interval = null; theFunc = null; //remove script })

 <a href="javascript:;" class="btn">STOP IT!</a>