繁体   English   中英

如何加载和卸载(删除)css 和 javascript 导入/文件?

[英]How can I load and unload(remove) css and javascript imports/files on will?

在某个用户交互(单击按钮)后,我尝试在我的网页中动态加载 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?

如果您有一个匿名间隔,那么您可以遍历所有间隔并停止它们,而无需接触您正在导入的脚本(因此它适用于 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>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM