如何动态终止间隔函数

Question

我正在研究下面的代码片段。有没有办法检查setInterval()是否真的被杀死或仍在后台处理中运行？

从技术上讲，我需要做的是在页面中没有.map时杀死 JS setInterval。我的理解是，由于if语句，仍在每 2 秒运行一次的setInterval()没有在控制台上写入。

setInterval(
  function() {
    if ($(".map")[0]) {
      console.log("Map is in the Page");
    } else {
     //Stop Interval
    }
  }, 2000);
  
  setTimeout(function(){ $(".box").empty(); 
  }, 9000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <div class="map">Map in Here</div>
</div>

Answer 1

您需要调用 clearInterval() 来停止间隔函数的执行。

下面是一个示例：

let i = 3;
let interval = setInterval(function() {
  if (i > 0) {
    console.log("Running " + i--);
  } else {
    clearInterval(interval);
    console.log("Stopped");
  }
}, 2000);

Answer 2

为了终止间隔或超时，您应该将其分配给变量进行引用。具体函数是：clearInterval(您的间隔引用变量名称(和 clearTimeout(您的超时引用变量名称(。

var yourInterval = setInterval(
  function() {
    console.log("Still running?"); //for testing purpose.
    if ($(".map")[0]) {
      console.log("Map is in the Page");
    } else {
      clearInterval(yourInterval); //it kills this interval, if the interval already terminated, it won't do anything harm, nor produce an error message in the browser console.
    }
  }, 2000);
  
  setTimeout(function(){ $(".box").empty(); 
  }, 9000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <div class="map">Map in Here</div>
</div>