如何动态终止区间函数答案

【问题标题】：How To Kill Interval Function Dynamically [duplicate]如何动态终止区间函数
【发布时间】：2017-11-11 13:18:52
【问题描述】：

能否请您看一下这个 sn-p，让我知道是否有办法检查 setInterval() 是否真的被杀死或仍在后台处理中运行？

从技术上讲，只要.map 不在页面中，我需要做的是终止 JS setinerval。我的理解是 setInterval() 仍然运行 2 秒只是因为 if 语句而没有在控制台上写入

setInterval(
  function() {
    if ($(".map")[0]) {
      console.log("Map is in the Page");
    } else {
     //Stop Inreval
    }
  }, 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>

【问题讨论】：

标签： javascript jquery

【解决方案1】：

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

这是一个例子：

let i = 3;

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

    console.log("Stopped");
  }
}, 2000);

【讨论】：

【解决方案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>

【讨论】：