clearInterval() не работает [дубликат]

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

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

6 ответов

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

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

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

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

это целочисленное значение, которое вам нужно перейти к clearInterval

Эл.г:

var timerID = setInterval(fontChange,500);

и позже

clearInterval(timerID);
3

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

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

установите таймер с

var_name = setInterval(fontChange, 500);

а то

clearInterval(var_name);
2

Я думаю, что вы должны сделать:

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

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

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

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

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

<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 только один раз, когда скрипт запускается. Если вы вносите изменения в DOM, это статическое решение может быть вредным.

таким образом, вы можете попробовать это (это более гибкий подход и использование параметров функции, поэтому вы можете вызвать функции на любой element):

<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. ;)

0