jquery - 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() 和 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>