javascript - 一个 div 开始内容到 fadeToggle，另一个 div 使用 javascript setInterval 函数停止 fadeToggle 动画

Question

我的 fiddle : 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

var fakeCursorInterval;

function startCursor(){
    fakeCursorInterval = setInterval(function() {             
    $("#fakeCursor").fadeToggle("slow","swing");},20);
    console.log("starting",fakeCursorInterval);
}
function stopCursor() {
    clearInterval(fakeCursorInterval);
    console.log("stopping",fakeCursorInterval);
}

$("#targetedDiv").click(function(){fakeCursorInterval = startCursor()});
$("#otherDiv").click(function(){stopCursor()});
console.log("outside",fakeCursorInterval);

我的问题是 stopCursor 中的 console.log 将间隔显示为未定义。

我看过这篇文章: clear interval doesn't work

所以我很确定这是一个范围问题，但我无法弄清楚我的具体问题。

Answer 1

您正在覆盖点击处理程序中的间隔变量。

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

仅此一项就可以了:

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