Question

首先，我有两个div box1和box2，我有这些复选框，最终它会完成。一个如果这些＆＃34;东西＆＃34;。眨眼。所以我创建了一个名为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时间以匹配总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>

Answer 2

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

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

clearInterval(box_id);

导致此错误：

未捕获的ReferenceError：未定义box_id

如果你解决了这个问题，请使用：

clearInterval(box1_id)

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

您的间隔都配置为使用0毫秒超时，因此一旦页面加载，您就会产生数百次blink的呼叫，速度与浏览器可以调用的速度一样快。这意味着当你单击复选框时，在清除间隔时，jQuery已经排队了许多动画，第一个div继续闪烁，而第二个div则开始。

最快的解决方案是将间隔设置为与动画时间具有相同的超时：

＆＃13;

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

＆＃13;

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

＆＃13;

这确实会在它们开始闪烁之前导致初始延迟，所以如果你想保持它们立即开始闪烁，你可能最好稍微重构以使blink函数自行调用：

＆＃13;

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")
    }
  });
});

＆＃13;

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

＆＃13;

clearInterval无法正常工作

2 个答案: