Задать вопрос
@JS-student
javascript

Почему не запускается clearInterval?

Здравствуйте! Учу основы JS. Написал код учебного задания: по клику на хедер он должен меняться и двигаться быстрее. После 10 клика хедер должен остановится. Но clearInterval почему то не работает. Форум почитал, ответа не нашел. Вроде опечаток нет и переменная глобальная. Подозреваю, что суть в том, что значение переменных в intervalId постоянно меняются. Но как это исправить, не знаю. Спасибо.

var leftOffset = 0;
var topOffset = 0;
	
var moveHeading = function () {
	$("#heading").offset({ left: leftOffset, 
		top: topOffset});
			
	if (leftOffset < 200 && topOffset <=0) {
		leftOffset++;
		}
	if (leftOffset >= 200 && topOffset < 200) {
		topOffset++;}
	if (leftOffset > 0 && topOffset >= 200) {
		leftOffset--;}
	if (leftOffset <= 0 && topOffset > 0) {
		topOffset--;
	}
};
var clicks = 0;
var speed = 50;
var intervalId; 
	
$("#heading").click(function () {
	clicks++;
	speed-=5;
	if (clicks < 10) {
	$("#heading").text("You clicked " + clicks);
	intervalId = setInterval(moveHeading, speed);
	}
	if (clicks == 10) {
	$("#heading").text("Congratulations! You won!");
	clearInterval(intervalId);
	}
}
);
  • Вопрос задан
  • 149 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
like-a-boss
@like-a-boss
Признайся,тебяТянетНаКодМужика,ты—программный гей
Потому что всякий раз, когда задаётся новый setInterval, старый нужно убить. А у вас они накапливаются.
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 2
@Comsequent
Пишу потихоньку.
like-a-boss, с Вашего позволения, я постараюсь дополнить ответ.
JS-student,
intervalId = setInterval(moveHeading, speed);
Эта строка должна быть выполнена Один раз.
Просто добавьте проверку, на undefined. Если да, установите setInterval.
Ответ написан
3 комментария
3 комментария
@AUser0
Чем больше знаю, тем лучше понимаю, как мало знаю.
Если уж давать код, то лучше так:
<html><title>Click-n-Win!</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
<div style='width:200px; height:250px; border:1px solid black;'>
    <div id=heading style='position:relative; width:100px; height:50px; border:1px solid red;'>Click</div>
</div>
<script>
var leftOffset = 0, topOffset = 0;

var moveHeading = function () {
  if (leftOffset < $("#heading").parent().innerWidth() - $("#heading").outerWidth() && topOffset <=0)    leftOffset += clicks * 3;
  if (leftOffset >= $("#heading").parent().innerWidth() - $("#heading").outerWidth() && topOffset < $("#heading").parent().innerHeight() - $("#heading").outerHeight())
    topOffset += clicks * 3;
  if (leftOffset > 0 && topOffset >= $("#heading").parent().innerHeight() - $("#heading").outerHeight())   leftOffset -= clicks * 3;
  if (leftOffset <= 0 && topOffset > 0)     topOffset -= clicks * 3;

  $("#heading").offset({ left: $("#heading").parent().offset().left + leftOffset, top: $("#heading").parent().offset().top + topOffset});
};
var clicks = 0, intervalId;

$("#heading").click(function () {
  clicks++;
  if (clicks == 1) intervalId = setInterval(moveHeading, 5);
  if (clicks < 10) $("#heading").text("You clicked "+clicks);
  if (clicks == 10) { clearInterval(intervalId); $("#heading").text("Congratulations! You won!"); }
});
</script>
</body>
</html>
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Верстка 3 экранов на React
18 нояб. 2024, в 17:01
2000 руб./за проект
Разработать сайт на Tilda
18 нояб. 2024, в 16:56
2000 руб./за проект
Доделать проект приложения на Python PyQt6
18 нояб. 2024, в 16:46
500 руб./за проект
Ещё заказы