clearInterval不起作用

Question

First I have two divs box1 and box2 and i have these checkbox(s) which eventually it does stuff. One if these "stuff". is blinking. so I made a function called blink where it makes the div sort of blinking.

I passed it through setInterval so it would blink until I tell it otherwise. (I tell it to stop blinking with checkbox input)

now to break the Interval I used clearInterval . but when I do that I won't stop. it does nothing or I am getting it wrong.

The idea here. when the page start, #box1 will be already blinking. When checkbox #stopBlink is checked. box2 should start blinking and box1 should stop. when #stopBlink is unchecked box1 should start blinking and box2 should stops.

Script:

    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

change setInterval time to match with total fade time

which is 400 + 900 = 1300

OR

you can do same with 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

The below addresses the code/logic aspects of the question - for your actual problem of blinking elements, you're better off using JAG's answer and use the CSS that modern browsers allow.

---

There are two issues in the code you've posted. Firstly, you're initially trying to clear a non-existent interval:

clearInterval(box_id);

resulting in this error:

Uncaught ReferenceError: box_id is not defined

If you fix that, and use:

clearInterval(box1_id)

It does correctly clear the interval and start the flashing of the 2nd div. However, we then see the second issue.

Your intervals are all configured to use a 0ms timeout, so as soon as the page loads, you're generating hundreds of calls to blink , as fast as the browser can call it. This means when you click the checkbox, while the interval is cleared, jQuery has already queued up lots of animations, and the first div continues to blink while the second one then starts.

The quickest solution is to just set the intervals to have the same timeout as the animation times:

 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> 

This does result in an initial delay before they start blinking though, so if you want to keep it that they start blinking immediately, you might be better off refactoring slightly to have the blink function call itself:

 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>