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将间隔显示为未定义。

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

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

Answer 1

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

$("#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);

See fiddle here.

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

2 个答案: