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

的问题是，因为你已经有了一个名为timerId您startcounting()和increment()功能，这隐藏着同一个名字的变量在外部范围的参数 - 这是一个你需要。

如果您删除这些属性，代码工作：

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>