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 ，对于其余代码而言，它是隐藏的。