jquery - clearInterval(timerId)无法正常工作

我想在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>

最佳答案

问题是因为您有名为startcounting()的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);
        }
    }
}

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

关于jquery - clearInterval(timerId)无法正常工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41017527/