ClearInterval() не работает

Возможный дубликат:
JS - Как очистить интервал после использования setInterval()

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

Ответы

Ответ 1

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

var intervalId;
on.onclick = function() {
    if (intervalId) {
        clearInterval(intervalId);
    }
    intervalId = setInterval(fontChange, 500);
};

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

Ответ 2

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

Это целочисленное значение, которое нужно передать в clearInterval

например:

var timerID = setInterval(fontChange,500);

и позже

clearInterval(timerID);

Ответ 3

Думаю, вам следует:

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

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

Ответ 4

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

Это правильное использование:

Установите таймер с помощью

var_name = setInterval(fontChange, 500);

а затем

clearInterval(var_name);

Ответ 5

Метод setInterval возвращает идентификатор интервала, который необходимо передать на clearInterval, чтобы очистить интервал. Вы передаете функцию, которая не будет работать. Здесь приведен пример рабочего набораInterval/clearInterval

var interval_id = setInterval(myMethod,500);
clearInterval(interval_id);

Ответ 6

В ваших функциях есть ошибки, но первое, что вам нужно сделать, - правильно установить тег тела:

<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" и другие vars только один раз, когда запускается script. Если вы вносите изменения в 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");

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