javascript - 清除间隔不起作用

Question

首先，我有两个 div 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

更改setInterval时间以与总淡入淡出时间匹配

即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>