Javascript：使用 clearInterval 停止 setInterval答案

【问题标题】：Javascript : Stop setInterval using clearIntervalJavascript：使用 clearInterval 停止 setInterval
【发布时间】：2018-07-21 17:31:20
【问题描述】：

我在这里看到这个问题被问了很多次（至少 6 个），答案从不正确使用变量到不正确范围。但是，我仍然无法让 clearInterval 停止我的计时器。

我将在下面发布完整的代码 - 但我希望做一些非常简单的事情。我只是想让代码刷新一个图像（在 mapbox 中），直到选择另一个图像。另一张图片会加载，但计时器不会停止，因此它会不断刷新旧图片。

我设置了一个名为“refreshtimerA”的全局变量来保存 setInterval。
在 addKEWX_REFLECTIVITY_toA() 中，此函数运行计时器并使用名为 refreshKEWXL2REFLECTIVITY_A() 的嵌套函数刷新该窗口中的图像（它是天气图）。这行得通。
当用户激活函数 addGOES_16_toA() 时，它应该（正如我添加的那样）激活 clearInterval(refreshtimerA);但这并不能阻止它。

我尝试了很多变体并在这里进行了筛选，但找不到有效的答案。我希望澄清这一点，因为我的整个项目完全停滞在应该简单的事情上。我的代码：

编辑：链接到 Dropbox 完整的 html/js 示例：https://www.dropbox.com/s/11y2i859csj3o6k/stackoverflow.zip?dl=0

var refreshtimerA;

function clearAllPaneA() {
  topleftmapbox.setLayoutProperty('overlay_KEWX_L2_REFLECTIVITY', 'visibility', 'none');
  topleftmapbox.setLayoutProperty('overlay_GOES_16_CH02', 'visibility', 'none');
  document.getElementById("reflectivityBar").style.visibility = "visible";
}

function addKEWX_REFLECTIVITY_toA(){
  clearAllPaneA();
  refreshtimerA = setInterval(refreshKEWXL2REFLECTIVITY_A, 5000); // 5 second constantly refreshes (works as the code is)
  topleftmapbox.setLayoutProperty('overlay_KEWX_L2_REFLECTIVITY', 'visibility', 'visible');
  document.getElementById("ReflectivityBar").style.visibility = "visible";


  function refreshKEWXL2REFLECTIVITY_A() {
    topleftmapbox.removeLayer('overlay_KEWX_L2_REFLECTIVITY');
    topleftmapbox.removeSource('source_KEWX_L2_REFLECTIVITY');

    topleftmapbox.addSource("source_KEWX_L2_REFLECTIVITY", {
      "type": "image",
      "url": "images/KEWX_L2_REFLECTIVITY.gif",
      "coordinates": [
        [-103.009641, 33.911],  
        [-94.009641, 33.911],   
        [-94.009641, 24.911], 
        [-103.009641, 24.911] 
      ]
    })

    var layers = topleftmapbox.getStyle().layers;
    // Find the index of the first symbol layer in the map style
    var firstSymbolId;
    for (var i = 0; i < layers.length; i++) {
      if (layers[i].type === 'symbol') {
        firstSymbolId = layers[i].id;
        break;
      }
    }

    topleftmapbox.addLayer({
      "id": "overlay_KEWX_L2_REFLECTIVITY",
      "source": "source_KEWX_L2_REFLECTIVITY",
      "type": "raster",
      "raster-opacity": 0.5,
      "layout": {"visibility": "visible"},
    }, firstSymbolId)
  }
}

function addGOES_16_toA(){
  clearInterval(refreshtimerA); // does not work
  clearAllPaneA();
  topleftmapbox.setLayoutProperty('overlay_GOES_16_CH02', 'visibility', 'visible');
}

【问题讨论】：

您应该在编写代码时强烈考虑使用缩进——它会使阅读和调试变得更加容易。（大量重复的换行也无济于事）
是否有可能多次调用 addKEWX_REFLECTIVITY_toA() 而中间没有调用 addGOES_16_toA() ，从而变量 refreshTimerA 被新值覆盖？
我还是新手，如果不将其格式化为 4 个字符，我将无法发布代码。所以我在记事本中破解了它，只是为了发布这个。一旦我弄清楚如何做得更好，我就可以在这里缩进。我在发布之前丢失了一些格式。
addKEWX_REFLECTIVITY_toA 永远不会在您的代码中调用
addKEWX_REFLECTIVITY_toA() 只能调用一次，所以我知道这不是这样做的。

标签： javascript mapbox

【解决方案1】：

您必须确保在替换refreshtimerA 的值之前调用clearInterval，例如：

<li><a title="" onclick="addGOES_16_toA(); addKEWX_REFLECTIVITY_toA();">GOES-16 then MRMS</a></li>

【讨论】：

这似乎不起作用。我调用 addKEWX_REFLECTIVITY_toA()，然后调用 addGOES_16_toA()。在addGOES_16_toA() 中发生任何事情 之前，它会立即调用clearInterval。我什至还没有 addGOES_16_toA() 内部的工作代码来干扰这个。在任何情况下我都无法让计时器停止。
我还尝试了另一个名为 stopTimer 的函数，它调用 clearInterval 并且 only 这样做。但它仍然没有阻止它。
我不知道你在说什么。@ 987654324@ 的代码已发布到您的问题，包括clearInterval(refreshtimerA)，addKEWX_REFLECTIVITY_toA 的代码在这里有问题包含分配给@987654327 @ 并且我声明 clearInterval 必须在 before 分配新值之前被调用 + 我从您的 Dropbox 链接添加了与 HTML 相关的代码示例...如果您有不同的问题，请以可以回答的方式表述您的问题，谢谢
好的，谢谢！我尝试了您告诉我的内容，但我在该过程中添加了一个语法错误，导致它仍然失败。你已经为我解决了这个问题，谢谢！现在可以完美运行了。

【解决方案2】：

愿这个例子能帮助你解决问题

var t; // timer id

var buttonStart = document.querySelector("#start");
var buttonStop = document.querySelector("#stop");

var timerDiv = document.querySelector("#timer");

buttonStart.onclick = function(){
  timerDiv.innerText = "Wait 3 seconds...";
  
	t = setTimeout(function(){
  	timerDiv.innerText = "OK";
    t = null;
  }, 3000);
  
}

buttonStop.onclick = function(){

  if(t){
    clearTimeout(t);
    t = null;
    timerDiv.innerText = "Stoped";
  } else {
    timerDiv.innerText = "It no timer";
  }

}

<div id="timer">unset</div>

<div>
  <input type="button" id="start" value="start">
</div>

<div>
  <input type="button" id="stop" value="stop">
</div>

【讨论】：