即使从 html 页面中删除了整个脚本，setInterval 也会继续运行答案

【问题标题】：setInterval keeps on running even after the whole script is removed from the html page即使从 html 页面中删除了整个脚本，setInterval 也会继续运行
【发布时间】：2019-04-01 18:57:25
【问题描述】：

我制作了一个自定义函数来复制 setInterval 函数。这是我想要做的：

<html>
   <head>
       <script id='scpt_a'>
            //custom setInterval function

     function interval(func,ti){

      try{
         func.call(null);
         }
       catch(err){
          throw new Error(err.toString());
         }
       setTimeout(()=>{interval(func,ti); },ti);
         }

       //custom setinterval function end

      $('#start).click(()=>{
          $('body').append("<script id='scpt_b'>interval(()=> 
          {console.log('hello');},10000);</script>");
       });

      $('#stop).click(()=>{
            $('#scpt_a').remove();
            $('#scpt_b').remove();
       });


       </script>
   </head>
   <body>
      <button id='start'>start</button>
       <button id='stop'>stop</button>
   </body>
</html>

每当我运行此代码时，它都可以正常工作，即当我单击 开始按钮 时，它会附加代码，以便代码执行它并继续打印 hello 。现在，当我按下 停止按钮 时，它会删除 附加脚本 以及 初始（非附加）脚本 .所以由于脚本不存在所以它应该停止执行但它没有发生。

我使用 chrome 开发工具，我看到点击 停止按钮 没有脚本（添加后有）在 HTML 文档中，但仍然 hello 正在控制台上打印。

请帮我弄清楚为什么会发生这种情况以及如何解决这个问题。

【问题讨论】：

标签： javascript jquery append google-chrome-devtools setinterval

【解决方案1】：

正如 xxxmatko 的回答中已经指出的那样，从 DOM 中删除脚本元素并不会阻止它运行，假设它已经被解析。

您需要想出另一种解决方案来取消执行间隔。也许最简单的方法是改用标准的setInterval 函数。这可以按如下方式完成：

// Start the interval:
let intervalID = setInterval(function() { /* your code */}, 10000);

// Stop the interval:
clearInterval(intervalID);

但是，如果您坚持使用自定义间隔函数，例如示例中的那个，您可以实现一些功能，让您稍后以类似的方式取消间隔。例如，您可以检查区间函数中的条件：

function interval(func,ti){
  /* your code */
  if ( /* some condition */ )
    setTimeout(()=>{interval(func,ti); },ti);
}

并且当$('#start')或$('#stop')被点击时，这个条件分别设置为真或假。

此外，这两种解决方案都避免了您在代码中遇到的另一个问题：如果用户点击两次$('#start')，您最终会在 DOM 中得到两个脚本元素（具有相同的 ID！）。

【讨论】：

【解决方案2】：

当您向页面添加一些脚本时，浏览器会对其进行解析。当您稍后删除脚本标记时，没关系，脚本已经被解析和处理并且它在浏览器内存中。因此，您的 interval 函数将继续运行，尽管您从页面中删除了脚本标签。

这是对这一事实的说明。我添加了对 jQuery 的引用，看到第一个警报，然后我删除它，然后我删除了 jQuery 脚本标签，你可以看到我仍然可以使用 jQuery $ 函数：

<script id="s1" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
	alert($);
  $("#s1").remove();
  alert($);
</script>

【讨论】：