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>