Форум

tone4ka · #1 (**permalink**) 25.11.2019, 15:34

Здравствуйте!
Подскажите, пожалуйста, как решить проблему. После неоднократного выполнения интервала, Id которого сохранен в переменной intervalId, не срабатывает clearInterval(intervalId). Выводила с помощью console.log значение Id интервала после последнего его выполнения и непосредственно перед очисткой-они совпадают, но очистка все равно не срабатывает.

var clickHandler=function(event){
			if(clickCount<10){
				clearInterval(intervalId);
				clickCount+=1;
				$('#heading').text('Ваши очки: '+clickCount);
				x-=3;
				var intervalId=setInterval(moveHeading,x);
				console.log(intervalId);
			}
			if(clickCount===10){
				$('#heading').text('Вы победили!'); 
				console.log(intervalId);
				clearInterval(intervalId); //не работает!
			}
		}
		$("h1").click(clickHandler);

рони · #2 (**permalink**) 25.11.2019, 15:38

tone4ka,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

рони · #3 (**permalink**) 25.11.2019, 15:48

tone4ka,
создайте переменную var intervalId вне clickHandler, а потом используйте в функции.

рони · #4 (**permalink**) 25.11.2019, 15:50

tone4ka,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
var intervalId, clickCount = 0, moveHeading = function() {
    clickCount--;
    $('#heading').text('Ваши очки: '+clickCount);
}, x = 500;
var clickHandler=function(event){
clearInterval(intervalId);
if(clickCount<10){
clickCount+=1;
$('#heading').text('Ваши очки: '+clickCount);
x-=3;
intervalId=setInterval(moveHeading,x);
}
if(clickCount===10){
$('#heading').text('Вы победили!');
}
}
$("h1").click(clickHandler);
});
  </script>
</head>

<body>
<div id="heading"></div>
<h1>click</h1>
</body>
</html>

tone4ka · #5 (**permalink**) 25.11.2019, 15:50

Спасибо! Исправила

tone4ka · #6 (**permalink**) 25.11.2019, 15:53

она создана и равняется интервалу с временем повтора, действующим до первого клика(т.е. я постепенно уменьшаю время уже существующего интервала с каждым кликом в приведенной здесь функции и присваиваю переменной intervalId новое значение)

tone4ka · #7 (**permalink**) 26.11.2019, 14:44

//Первоначальные отступы заголовка
	var leftOffset=0;
	var topOffset=0;

	//устанавливаем функцию движения по траектории
	var moveHeading=function(){
		$('#heading').offset({left:leftOffset,top:topOffset});
	if(leftOffset<200){if(topOffset===0){leftOffset++;}}
	if(leftOffset>0){if(topOffset===200){leftOffset--;}}
		if(leftOffset===200){if(topOffset<200){topOffset++;}}
		if(leftOffset===0){if(topOffset>0){topOffset--;}}
	}
		
		var clickCount=0;//Счетчик кликов
        x=30;//первоначальный интервал, с которым заголовок бегает по странице

        var intervalId=setInterval(moveHeading,x); //Двигаем заголовок по ктраектории с интервалом 33мс

//устанавливаем функцию подсчета очков и ускорения движения по клику:
		var clickHandler=function(event){
			if(clickCount<10){
				clearInterval(intervalId);//очистка интервала, действующего до первого выполнения функции clickHandler (33мс)
				clickCount+=1;  //счетчик кликов
				$('#heading').text('Ваши очки: '+clickCount);//вывожу набранные очки в заголовок
				x-=3;//уменьшаю время повтора интервала
				var intervalId=setInterval(moveHeading,x);
				console.log(intervalId);//проверяю значение Id первый раз
			}
			if(clickCount===10){
				$('#heading').text('Вы победили!'); //заменяю значение заголовка на поздравление с победой
				console.log(intervalId);//проверяю значение Id второй раз
				clearInterval(intervalId); //не работает!
			}
		}
		$("h1").click(clickHandler); //прилепляем функцию клика к заголовку страницы

рони · #8 (**permalink**) 26.11.2019, 14:55

tone4ka,
уберите var из строки 26!!!

ksa · #9 (**permalink**) 26.11.2019, 14:58

tone4ka, у тебя внутри функции

var clickHandler=function(event){}

Объявляется новая переменная intervalId...

Сообщение от tone4ka

x-=3;//уменьшаю время повтора интервала
var intervalId=setInterval(moveHeading,x);

Так понятно?

Почитай про область видимости переменных с var в JS.

https://learn.javascript.ru/var

tone4ka · #10 (**permalink**) 26.11.2019, 15:02

Спасибо большое!

Форум

Справочник

Discord чат

Курсы javascript