如何删除动态的js？

Question

比如我动态的创建了script标签，从textarea获取动态写入的内容

var num = 1;
setInterval(()=>{
++num;
console.log(num);
$('.box').html(num);
},1000)

然后添加到body里面去。

当再次修改textarea里面的内容的时候，删除之前的创建的script，再重新生成，然后就发现，之前写的js还在执行。有没有什么办法可以清除之前的js，各位大神指教一下，谢谢！

Answer 1

无法清除

比如说你全局有个 window.a = 1
在你 textarea 的 script 中执行 (window.a++)
那么你想在想让 window.a == 1 , 这是不可能的

当然既然是程序就不存在绝对的不可能，那么有什么可以实现的方案呢？

1. script 构建到新的 iframe 中，每次其实都是重新加载页面。比如说一些在线编辑器， jsrun 、codepen 不都是这样的吗？
2. 不使用全局的变量，而是使用固定的变量，比如说vue，每次手动销毁即可。

Answer 2

JavaScript 是事件驱动的，JavaScript 运行的本质，其实就是将组织好的逻辑绑定到事件，在事件触发的时候按照组织好的逻辑行事，当绑定事件这个动作完成之后，文档里的代码就没用了，这个时候，删除代码也不会影响已经绑定的逻辑。
这里的事件是广义的，除了 BOM 和 DOM 事件之外，脚本加载完成、定时器到了指定的时长……都算事件。
所以你要终止那些被删除代码的逻辑的运行，其实是要解除它们与事件的绑定：添加到 DOM 事件的，要移除监听；放到定/延时器里的回调，就清除定/延时器；处理 Ajax 请求的，就 abort请求……
为了确保解绑成功，你必须缓存解绑的入口：对于 HTML 元素而言，要保留 DOM 引用或者确保选择器还能选到元素；对于定/延时器，你要缓存初始化时返回的那个 ID；对于 Ajax 请求而言，你要缓存 XMLHTTPRequest 实例或者 Promise 对象。
像你这个定时器解除的最佳方法，就是按照楼上说的来，用 timer 缓存定时器 ID，不要的时候再清除它就可以了。

Answer 3

timer = setInterval(....)

要清除时
clearInterval(timer)

Answer 4

如果是DOM监听就是 removeEventListener移除监听。
如果是函数是全局函数 你可以使用同名的函数 重新定义一遍。就覆盖原来的定义了，也相当于清除了原来的功能

Answer 5

对， 可以尝试用函数封装这段逻辑，再次加载的时候覆盖它