не работает clearInterval по Id
Здравствуйте!
Подскажите, пожалуйста, как решить проблему. После неоднократного выполнения интервала, 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);
|
tone4ka,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
tone4ka,
создайте переменную var intervalId вне clickHandler, а потом используйте в функции. |
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>
|
Спасибо! Исправила
|
она создана и равняется интервалу с временем повтора, действующим до первого клика(т.е. я постепенно уменьшаю время уже существующего интервала с каждым кликом в приведенной здесь функции и присваиваю переменной intervalId новое значение)
|
вот полная версия скрипта с пояснениями. Не помогает, она задана была
//Первоначальные отступы заголовка
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); //прилепляем функцию клика к заголовку страницы
|
tone4ka,
уберите var из строки 26!!! |
tone4ka, у тебя внутри функции
var clickHandler=function(event){}
Объявляется новая переменная intervalId... Цитата:
Почитай про область видимости переменных с var в JS. ;) https://learn.javascript.ru/var |
Спасибо большое!
|
| Часовой пояс GMT +3, время: 12:27. |