一格開始內容fadeToggle和另一個DIV使用JavaScript的setInterval功能

Question

我的小提琴停止fadeToggle動畫： http://jsfiddle.net/tmanundercover/62ap2/ CSS

#targetedDiv, #otherDiv { 
    border: 1px solid; 

} 

HTML

<div id="targetedDiv">&nbsp<span id="fakeCursor">|</span></div> 
<br> 
<div id="otherDiv">click here to stop</div> 

的Javascript

​​

我的問題是th在stopCursor中的console.log中將間隔顯示爲未定義。

我已經看過這個帖子： clear interval doesn't work

，所以我敢肯定這是一個範圍的問題，但我無法弄清楚我的具體問題。

Answer 1

除了通過@koala_dev提到的問題，setInterval間隔爲20，該fadeToggle間隔爲slow（這是600）。因此，如果您在1秒（1000毫秒）後致電stopCursor()，則fadeToggle將被稱爲50次。在這種情況下，淡入淡出動畫仍然會持續30秒（即使setInterval已被清除）。要解決該問題，只需使用fadeToggle和setInterval（例如400毫秒）的相同持續時間。此外，您可以致電.stop()停止stopCursor()的淡出動畫，並確保它會真正停止。

var fakeCursorInterval; 

function startCursor() { 
    $("#fakeCursor").show().fadeToggle(400, "swing"); 
    fakeCursorInterval = setInterval(function() {    
     $("#fakeCursor").fadeToggle(400,"swing"); 
    }, 400); 
    console.log("starting", fakeCursorInterval); 
} 
function stopCursor() { 
    clearInterval(fakeCursorInterval); 
    $("#fakeCursor").hide().stop(); 
    console.log("stopping", fakeCursorInterval); 
} 
$("#targetedDiv").click(startCursor); 
$("#otherDiv").click(stopCursor); 
console.log("outside", fakeCursorInterval); 

See fiddle here.

Answer 2

您正在重寫您的點擊處理程序中的區間變量。

$("#targetedDiv").click(function(){fakeCursorInterval = startCursor()}); 

僅這應該工作：

$("#targetedDiv").click(startCursor); 
$("#otherDiv").click(stopCursor);