clearInterval（timerId）不起作用

Question

我希望在mouseenter事件时开始计数，然后停止计算mouseleave事件。但是，正如您在此示例的控制台中看到的那样，mouseleave中的clearInterval(timerId)命令无效。

有什么问题？

var timerId;
clearInterval(timerId);

$("#demo").mouseenter(function() {
  setTimeout(function() {
    startcounting(timerId);
  }, 2000)
});

$("#demo").mouseleave(function() {
  clearInterval(timerId);
});

function startcounting(timerId) {
  var number = 0;
  timerId = setInterval(function() {
    increment(timerId);
  }, 100);

  function increment(timerId) {
    if (number >= 100) {
      number = 0;
      clearInterval(timerId);
    } else {
      number++;
      console.log(number);
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="demo">demo</div>

Answer 1

问题是因为你有一个名为startcounting()的{​​{1}}和increment()函数的参数，它隐藏了外部作用域中同名的变量 - 这是你需要的。

如果删除这些属性，代码将起作用：

timerId

var timerId;
clearInterval(timerId);

$("#demo").mouseenter(function() {
    setTimeout(function() {
        startcounting(); // remove here
    }, 2000)
});

$("#demo").mouseleave(function() {
    clearInterval(timerId);
});

function startcounting() { // remove here
    var number = 0;
    timerId = setInterval(function() {
        increment(timerId);
    }, 100);

    function increment() { // remove here
        if (number >= 100) {
            number = 0;
            clearInterval(timerId);
        } else {
            number++;
            console.log(number);
        }
    }
}