Я следую учебнику по JS. И я наткнулся на эту проблему ... Задача состояла в том, чтобы «анимировать» заголовок текста (и я этого добиваюсь), и где бы я ни нажимал, «анимация» должна прекратиться ...
Когда я нажимаю на свой первый интервал все работает, но через каждый второй интервал я получаю сообщение " интервал B не определен ", я знаю, что проблема в областях, но я не знаю, в чем именно проблема ...
<!DOCTYPE html>
<html>
<head>
<title>Interactive programming</title>
</head>
<body>
<h1 id="heading">Hello world!</h1>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script>
// We'll fill this in next
var leftOffset = 0;
var topOffset = 0;
var moveHeading = function () {
$("#heading").offset({ left: leftOffset });
leftOffset++;
if (leftOffset > 200) {
leftOffset = 200;
intervalB = setInterval(moveHeadingDown, 30);
}
};
intervalA = setInterval(moveHeading, 30);
var moveHeadingDown = function () {
$("#heading").offset({ top: topOffset });
topOffset++;
if (topOffset > 200) {
topOffset = 200;
intervalC = setInterval(moveHeadingRight, 30);
}
};
var moveHeadingRight = function () {
$("#heading").offset({ left: leftOffset });
leftOffset--;
if (leftOffset < 0) {
intervalD = setInterval(moveHeadingUp, 30);
leftOffset = 0;
}
};
var moveHeadingUp = function () {
$("#heading").offset({ top: topOffset });
topOffset--;
if (topOffset < 0) {
topOffset = 0;
}
};
var clickHandler = function (event) {
clearInterval(intervalA);
clearInterval(intervalB);
console.log("Click!");
};
$("html").click(clickHandler);
</script>
</body>
</html>