clearInterval不工作

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

下面讨论了问题的代码/逻辑方面--对于闪烁元素的实际问题，最好使用JAG's answer并使用现代浏览器所允许的CSS。

在您发布的代码中有两个问题。首先，您最初试图清除一个不存在的间隔：

clearInterval(box_id);

导致此错误：

未定义的ReferenceError: box_id未定义

如果您修复了它，并使用：

clearInterval(box1_id)

它确实正确地清除了间隔，并开始了第二个div的闪烁。然而，我们看到了第二个问题。

您的间隔都配置为使用0ms超时，因此，一旦页面加载，您将生成数百个对blink的调用，浏览器可以调用它的速度。这意味着当您单击复选框时，当间隔被清除时，jQuery已经排起了许多动画的队列，第一个div继续闪烁，而第二个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>

​