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

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

У меня есть функция, которая изменяет 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>

javascript scope setinterval clearinterval
person Matt Sanchez    schedule 02.02.2013    source источник
comment
Сначала я посмотрел спецификацию MDN, но это не помогло мне решить проблему.   -  person Matt Sanchez    schedule 03.02.2013
comment
window.timer = setInterval (изменение шрифта, 500); clearInterval(окно.таймер)   -  person Samiul    schedule 25.02.2018

Ответы (6)


arrow_upward
73
arrow_downward

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

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

off.onclick = function() {
    clearInterval(intervalId);
};
person Konstantin Dinev    schedule 02.02.2013
comment
это нормально, но вы столкнетесь с другой проблемой, если будете использовать setInterval() (или setTimeout()) в ситуации, когда ее можно запускать несколько раз. Если вы щелкнете дважды, вы никогда не очистите первый setInterval(). Вам нужно либо if(intervalId !== undefined) { intervalId = setInterval(...), либо сделать intervalId массивом, если вы хотите больше setIntervals при каждом дополнительном клике - person papo; 10.01.2017

arrow_upward
5
arrow_downward

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

Именно это целочисленное значение вам нужно передать в clearInterval

e.g:

var timerID = setInterval(fontChange,500);

и позже

clearInterval(timerID);
person Jon Egerton    schedule 02.02.2013

arrow_upward
2
arrow_downward

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

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

off.onclick = function() {
    clearInterval(myInterval);
};
person Lorenzo Medeot    schedule 02.02.2013

arrow_upward
2
arrow_downward

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

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

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

var_name = setInterval(fontChange, 500);

а потом

clearInterval(var_name);
person Lrdwhyt    schedule 02.02.2013

arrow_upward
1
arrow_downward

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

var interval_id = setInterval(myMethod,500);
clearInterval(interval_id);
person Paul Kehrer    schedule 02.02.2013

arrow_upward
1
arrow_downward

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

person Marcus    schedule 03.02.2013