clearInterval不會停止間隔

Question

在這里瀏覽了相同的問題后，我找不到解決問題的方法。 我有以下問題

 function movement(mov, element) { canvasMov = document.getElementById('xy_canvas'); ctxMov = canvasMov.getContext("2d"); wMov = canvasMov.width; hMov = canvasMov.height; if (element != 'xy_canvas') { my_range = document.getElementById(element); if (mov) { my_interval = setInterval(function() { if (my_range != null) touchEvents(my_range.value); sendMovements(element); }, 160); } else { clearInterval(my_interval); console.log(element, mov); my_range.value = 0; } if (my_range.value == 0) clearInterval(my_interval); } else { if (mov) { my_interval = setInterval(function() { eventsMove(); sendMovements(); }, 160); } else { clearInterval(my_interval); console.log(element, mov); } } } 

 <div class="col12 fl"> <input type="range" id="alt_range" min="-1" max="1" value="0" step="0.2" class="slider" oninput="movement(true,'alt_range')" onmouseup="movement(false,'alt_range')"> </div> 

clearInterval不會停止間隔，也許我在這里缺少什么，請問任何建議嗎？

Answer 1

當您啟動一個新的間隔功能時，您不會停止舊的功能。 然后， clearInterval(my_interval)將僅停止最后一個啟動的程序，但是較舊的將繼續運行。 您需要調用clearInterval(my_interval); 在每個setInterval()調用之前。

而且由於所有代碼路徑最終都會調用setInterval()或clearInterval() ，因此您只需在函數開始時執行一次clearInterval(my_interval)即可。

 function movement(mov, element) { canvasMov = document.getElementById('xy_canvas'); ctxMov = canvasMov.getContext("2d"); wMov = canvasMov.width; hMov = canvasMov.height; clearInterval(my_interval) if (element != 'xy_canvas') { my_range = document.getElementById(element); if (mov) { if (my_range.value != 0) { my_interval = setInterval(function() { if (my_range != null) touchEvents(my_range.value); sendMovements(element); }, 160); } } else { console.log(element, mov); my_range.value = 0; } } else { if (mov) { my_interval = setInterval(function() { eventsMove(); sendMovements(); }, 160); } else { console.log(element, mov); } } } 

 <div class="col12 fl"> <input type="range" id="alt_range" min="-1" max="1" value="0" step="0.2" class="slider" oninput="movement(true,'alt_range')" onmouseup="movement(false,'alt_range')"> </div> 

Answer 2

您需要做的就是在頂部定義my_interval ，例如

var my_interval = null;

目前，您正在if條件中創建my_interval ，對於其余代碼而言，它是隱藏的。