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>