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;

目前，您正在my_interval条件下创建if，它隐藏在其余代码中。