Javascript：使用clearInterval停止setInterval

Question

我在这里（至少6次）多次问过这个问题，答案从不正确地使用变量到不正确的范围不等。 但是，我仍然无法获得clearInterval来停止计时器。

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

1. 我设置了一个名为“ refreshtimerA”的全局变量来保存setInterval。

2. 在addKEWX_REFLECTIVITY_toA（）中，此函数运行计时器，并使用称为refreshKEWXL2REFLECTIVITY_A（）的嵌套函数刷新该窗口中的图像（这是天气图）。 这可行。

3. 当用户激活功能addGOES_16_toA（）时，它应该（如我添加的那样）激活clearInterval（refreshtimerA）; 但这并不能阻止它。

我尝试了很多变化并在这里进行了筛选，但找不到有效的答案。 我希望解决这个问题，因为我的整个项目都完全停留在应该简单的事情上。 我的代码：

编辑：链接到保管箱完整的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');
}

Answer 1

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

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

Answer 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>