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

我的小提琴： CSS

HTML

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

我看过这篇文章：

---

所以我很确定这是一个范围问题，但我无法解决我的具体问题

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

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

仅此一点就应该起作用：

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

---

除了@koala_dev提到的问题外，

setInterval

间隔是

20

，

fadeToggle

间隔是

slow

（即

600

）。因此，如果在1秒（1000毫秒）后调用

stopCursor（）

，则会调用

fadeToggle

。在这种情况下，淡入淡出动画仍将持续30秒（即使setInterval已被清除）。要解决该问题，只需对

fadeToggle

和

setInterval

使用相同的持续时间（例如

400

毫秒）。此外，您可以调用

.stop（）

，在

停止光标（）

处停止淡入淡出动画，并保证它将真正停止

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);

---

抓得好！我在JSFIDLE中做了这个更改，但单击“otherDiv”div并没有停止光标，但至少现在我从console.log获得了相同的fakeCursorInterval ID。

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

$("#targetedDiv").click(startCursor);
$("#otherDiv").click(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);