时间戳

首页 > 解决方案 > 如何加载和卸载（删除）css 和 javascript 导入/文件？

javascript - 如何加载和卸载（删除）css 和 javascript 导入/文件？

问题描述

在某个用户交互（单击按钮）后，我尝试在我的网页中动态加载 CSS 文件和脚本文件，并且效果很好。CSS 文件引入了一些应用于网页的样式。在 Javascript 文件中，我将一些代码放在从 IIFY 执行的setInterval()中，以便代码可以以 1 秒的间隔无限运行。

但是当我尝试卸载（删除）它们时，CSS文件很容易被删除，但脚本文件却产生了问题。通过<link rel="stylesheet" href="res/demo.css">从 index.html 文件中删除，由它引入的样式也会从 index.html 中删除。通过删除<script src="res/demo.js"></script>底层代码继续运行。

GIT 存储库中的示例代码：

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

除了完全刷新页面之外，如何停止脚本并清除它所占用的内存？

标签： javascript

解决方案

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

推荐阅读