一个div开始内容到fadeToggle和另一个div停止fadeToggle动画使用javascript setInt

Question

我的小提琴: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显示间隔未定义。

我看过这篇文章:清除间隔不起't工作

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

Answer 1

您正在重写单击处理程序中的interval变量。

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

这应该单独工作:

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

Answer 2

除了@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);