添加Click处理程序，并使用clearIntervals取消间隔

Question

我添加了fadeOut和fadeIn，看看我的点击处理程序是否能正常工作。如何添加单击处理程序以取消动画？如何使用clearInterval函数取消间隔？

var offset = 0;
var direction = "left";
var moveHeading = function() {
if (direction === "left") {
$('#heading').offset({
left: offset
});
offset += 2;
if (offset > 400) {
direction = "down";
offset = 0;
}
} else if (direction === "down") {
$('#heading').offset({
top: offset
});
offset += 2;
if (offset > 400) {
direction = "right";
}
} else if (direction === "right") {
$('#heading').offset({
left: offset
});
offset -= 2;
if (Math.abs(offset) <= 0) {
direction = "up";
offset = 0;
}
} else if (direction === "up") {
$('#heading').offset({
top: offset
});
offset -= 2;
if (Math.abs(offset) > 200) {
direction = "left";
offset = 0;
}
}
};
setInterval(moveHeading, 30);
$(document).ready(function() {
$("#heading").click(function() {
$(this).fadeOut(3000).fadeIn(3000);
})
})
clearInterval(moveHeading);

<h1 id="heading">Hola mi gente!! Como esta?</h1>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>

Answer 1

要在单击#heading时停止动画，您需要存储从setInterval()调用返回的id，然后将其提供给单击事件处理程序中的clearInterval()调用。试试这个：

var offset = 0;
var direction = "left";
var moveHeading = function() {
if (direction === "left") {
$('#heading').offset({
left: offset
});
offset += 2;
if (offset > 400) {
direction = "down";
offset = 0;
}
} else if (direction === "down") {
$('#heading').offset({
top: offset
});
offset += 2;
if (offset > 400) {
direction = "right";
}
} else if (direction === "right") {
$('#heading').offset({
left: offset
});
offset -= 2;
if (Math.abs(offset) <= 0) {
direction = "up";
offset = 0;
}
} else if (direction === "up") {
$('#heading').offset({
top: offset
});
offset -= 2;
if (Math.abs(offset) > 200) {
direction = "left";
offset = 0;
}
}
};
let interval = setInterval(moveHeading, 30);
$(document).ready(function() {
$("#heading").click(function() {
$(this).fadeOut(3000).fadeIn(3000);
clearInterval(interval);
})
})

<h1 id="heading">Hola mi gente!! Como esta?</h1>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>