Не работает clearInterval()

Question

Проблема с очисткой интервала в JavaScript

У меня есть функция, которая изменяет font-family некоторого текста каждые 500 мс с использованием setInterval (я сделал это просто для практики в JavaScript). Функция вызывается при нажатии на кнопку "включить", и интервал должен очищаться с помощью отдельной кнопки "выключить". Однако кнопка "выключить" на самом деле не очищает интервал, он продолжает работу. Я подозреваю, что это связано с областью видимости, но не уверен, как написать это по-другому. Кроме того, я не хочу использовать jQuery, потому что в конце концов я это делаю для обучения.

Вот мой код:

<body>
<p><span id="go" class="georgia">go</span> Italian</p>
<p>
    <button id="on" type="button" value="turn on">turn on</button>
    <button id="off" type="button" value="turn off">turn off</button>
</p>

<script>
var text = document.getElementById("go");
var on = document.getElementById("on");
var off = document.getElementById("off");

var fontChange = function() {
    switch(text.className) {
        case "georgia":
            text.className = "arial";
            break;
        case "arial":
            text.className = "courierNew";
            break;
        case "courierNew":
            text.className = "georgia";
            break;      
    }
};

on.onclick = function() {
    setInterval(fontChange, 500);
};

off.onclick = function() {
    clearInterval(fontChange);
}; 
</script>
</body>

Как я могу правильно очистить интервал?

Answer 1

setInterval возвращает идентификатор (ID), который вы затем используете для остановки интервала с помощью clearInterval.

Вот пример кода:

var intervalId;

on.onclick = function() {
    // Если интервал уже запущен, останавливаем его
    if (intervalId) {
        clearInterval(intervalId);
    }
    // Устанавливаем новый интервал
    intervalId = setInterval(fontChange, 500);
};

off.onclick = function() {
    // Останавливаем интервал по его ID
    clearInterval(intervalId);
};

В этом коде, при нажатии на кнопку on, мы проверяем, есть ли уже запущенный интервал. Если да, то мы его останавливаем и устанавливаем новый с помощью setInterval. При нажатии на кнопку off, интервал останавливается.

Answer 2

Функция setInterval возвращает целочисленное значение, которое является идентификатором созданного вами "инстанса таймера".

Этот целочисленный идентификатор нужно передать в clearInterval.

Например:

var timerID = setInterval(fontChange, 500);

А позже вы можете остановить таймер следующим образом:

clearInterval(timerID);

Answer 3

Вы можете использовать следующий код для реализации желаемого функционала:

var myInterval;
on.onclick = function() {
    myInterval = setInterval(fontChange, 500);
};

off.onclick = function() {
    clearInterval(myInterval);
};

В этом коде при нажатии на кнопку on будет запускаться интервал, вызывающий функцию fontChange каждые 500 миллисекунд. При нажатии на кнопку off интервал будет очищен, что остановит вызовы функции. Убедитесь, что кнопки on и off правильно определены в вашем HTML коде, а функция fontChange реализована для изменения шрифта.

Answer 4

Вы неправильно используете clearInterval.

Вот правильный порядок действий:

Сначала устанавливаете таймер с помощью:

var_name = setInterval(fontChange, 500);

А затем вызываете clearInterval так:

clearInterval(var_name);

Answer 5

В вашем коде есть ошибки, но прежде всего вам нужно правильно установить тег <body>:

<body>
<p><span id="go" class="georgia">go</span> Italian</p>
<p>
    <button id="on" type="button" value="turn on">turn on</button>
    <button id="off" type="button" value="turn off">turn off</button>
</p>
</body>

<script>....</script>

Проблема может заключаться в том, что вы объявляете переменную var text и другие переменные только один раз, когда скрипт начинается. Если вы вносите изменения в DOM, это статичное решение может быть неполезным.

Попробуйте использовать подход, описанный ниже. Он более гибкий и использует параметры функций, что позволяет вам вызывать функции для любого элемента:

<body>
<p><span id="go" class="georgia">go</span> Italian</p>
<p>
    <button type="button" value="turn on" onclick="turnOn('go')">turn on</button>
    <button type="button" value="turn off" onclick="turnOff()">turn off</button>
</p>
</body>

<script type="text/javascript">
var interval;

var turnOn = function(elementId){
    interval = setInterval(function(){fontChange(elementId);}, 500);
};

var turnOff = function(){
    clearInterval(interval);
};

var fontChange = function(elementId) {
    var text = document.getElementById(elementId);
    switch(text.className) {
        case "georgia":
            text.className = "arial";
            break;
        case "arial":
            text.className = "courierNew";
            break;
        case "courierNew":
            text.className = "georgia";
            break;      
    }
};
</script>

Эти переменные больше не нужны, так что удалите их:

var text = document.getElementById("go");
var on = document.getElementById("on");
var off = document.getElementById("off");

Это динамический код, который работает универсально и не обращается к элементам напрямую. Мне нравится этот подход больше, чем определять отдельную функцию для каждого элемента div. 😉

Не работает clearInterval()

Проблема с очисткой интервала в JavaScript

5 ответ(ов)

Руководство по Markdown

Форматирование текста

Код

Списки

Поддерживаемые языки программирования

Популярные

Другие .NET

Базы данных