clearInterval не работает

Question

Сначала у меня есть два divs box1 и box2, и у меня есть эти флажки, которые в конечном итоге это делают. Один, если эти «вещи». мигает. поэтому я сделал функцию под названием blink, где он делает мигание div.

Я передал его через setInterval, поэтому он будет мигать, пока я не скажу об этом иначе. (Я говорю, чтобы он переставал мигать с помощью флажка)

сейчас, чтобы разбить интервал Я использовал clearInterval. но когда я это сделаю, я не остановлюсь. он ничего не делает, или я ошибаюсь.

Идея здесь. когда начало страницы, #box1 будет уже мигать. Когда установлен флажок #stopBlink. box2 должно начать мигать, и box1 должен остановиться. когда #stopBlink не отмечен box1 должен начать мигать, а box2 должен остановиться.

Сценарий:

function blink(text) { 
     $(text).fadeTo(400, 0.3).fadeTo(900, 1.0); 
    } 

    $(document).ready(function(){ 
     box1_id = setInterval(function(){blink("#box1")}, 0); 

     $('input[type="checkbox"]').click(function() { 
      if($("#stopBlink").is(':checked')) 
      { 
       clearInterval(box1_id); 
       box2_id = setInterval(function(){blink("#box2")}, 0); 
      }else{ 
       clearInterval(box2_id); 
       box1_id = setInterval(function(){blink("#box1")}, 0); 
      } 
     }); 
    }); 

HTML:

<input type="checkbox" id="DoSomethingElse"> Do Something Else 
<input type="checkbox" id="stopBlink"> Stop the Blinking 
<div id="box1">BLINKING</div> 
<div id="box2">NOT BLINKING</div> 

Answer 1

Ниже рассматриваются код/​​логические аспекты вопроса - для вашей фактической проблемы мигания элементов, вы лучше используя JAG's answer и используйте CSS, который позволяют современные браузеры.

---

В коде, который вы отправили, есть две проблемы. Во-первых, вы сначала пытается очистить несуществующий интервал:

clearInterval(box_id); 

в результате этой ошибки:

Uncaught ReferenceError: box_id is not defined

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

clearInterval(box1_id) 

It правильно очищает интервал и начинает мигать 2-го деления. Однако мы видим вторую проблему.

Все ваши интервалы настроены на использование тайм-аута 0 мс, поэтому, как только страница загружается, вы генерируете сотни вызовов до blink так же быстро, как может его называть браузер. Это означает, что когда вы нажимаете этот флажок, а интервал очищается, jQuery уже поставил в очередь много анимаций, и первый div продолжает мигать, а второй запускается.

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

function blink(text) { 
 
     $(text).fadeTo(400, 0.3).fadeTo(900, 1.0); 
 
    } 
 

 
    $(document).ready(function(){ 
 
     box1_id = setInterval(function(){blink("#box1")}, 1300); 
 

 
     $('input[type="checkbox"]').click(function() { 
 
      if($("#stopBlink").is(':checked')) 
 
      { 
 
       clearInterval(box1_id); 
 
       box2_id = setInterval(function(){blink("#box2")}, 1300); 
 
      }else{ 
 
       clearInterval(box2_id); 
 
       box1_id = setInterval(function(){blink("#box1")}, 1300); 
 
      } 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" id="DoSomethingElse"> Do Something Else 
 
<input type="checkbox" id="stopBlink"> Stop the Blinking 
 
<div id="box1">BLINKING</div> 
 
<div id="box2">NOT BLINKING</div>

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

var timeout; 
 

 
function blink(text) { 
 
    $(text).fadeTo(400, 0.3).fadeTo(900, 1.0); 
 
    timeout = setTimeout(function() { 
 
    blink(text); 
 
    }, 1300); 
 
} 
 

 
$(document).ready(function() { 
 
    blink("#box1"); 
 

 
    $('input[type="checkbox"]').click(function() { 
 
    clearTimeout(timeout); 
 
    if ($("#stopBlink").is(':checked')) { 
 
     blink("#box2") 
 
    } else { 
 
     blink("#box1") 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" id="DoSomethingElse">Do Something Else 
 
<input type="checkbox" id="stopBlink">Stop the Blinking 
 
<div id="box1">BLINKING</div> 
 
<div id="box2">NOT BLINKING</div>

Answer 2

изменение setInterval времени, чтобы соответствовать общей fade времени

которая 400 + 900 = 1300

ИЛИ

вы можете сделать то же самое с помощью CSS

$(document).ready(function() { 
 
    $("#stopBlink").change(function() { 
 
    $("#box1, #box2").toggleClass('blink'); 
 
    }); 
 
});

.blink { animation: blink 600ms infinite alternate; } 
 

 
@keyframes blink { 
 
    from { opacity: 1; } 
 
    to { opacity: 0; } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" id="DoSomethingElse">Do Something Else 
 
<input type="checkbox" id="stopBlink">Stop the Blinking 
 
<div id="box1" class="blink">BLINKING</div> 
 
<div id="box2">NOT BLINKING</div>