Javascript/jQuery can't seem to get ClearInterval to work

Question

I am reading a jQuery book and trying to do an example. In the example lightning flashes on the screen, and that part works fine. The problem is that when you switch tabs, and then switch back, the lightning starts flashing in rapid succession. The problem is supposed to be fixed using the window.onblur and window.onfocus events, but it's not working. Can anybody see what I am doing wrong?

There are three hidden lightning pictures with different id's, and three different functions that make each one flash. goLightning() sets the interval for each function to go, and stopLightning() should clear that interval. That part is what seems not to be working for all I know. Here is the code:

$(document).ready(function(){
    goLightning();
    window.onblur = stopLightning;
    window.onfocus = goLightning;
    var int1; var int2; var int3;

    // this function sets the lightning interval
    function goLightning() {
        int1 = setInterval(function() { lightning_one(); },4000);
        int2 = setInterval(function() { lightning_two(); },5000);
        int3 = setInterval(function() { lightning_three(); },7000);
     }

     // this function clears the lightning when the window isn't focused
     function stopLightning() {
        window.clearInterval(int1);
        window.clearInterval(int2);
        window.clearInterval(int3);
    }

    // these three functions make the lightning flash and seem to be working fine
    function lightning_one() {
            $("#container #lightning1").fadeIn(250).fadeOut(250);
    }
    function lightning_two() {
        $("#container #lightning2").fadeIn(250).fadeOut(250);
    }
    function lightning_three() {
        $("#container #lightning3").fadeIn(250).fadeOut(250);
    }
});

I have no idea why this isn't working. It seems like stopLightning() isn't clearing the interval, or window.onblur isn't working. Anyway, any feedback would be helpful. Thanks!

Quick question, how are you testing this if the only way to see if it works or not is by not seeing it? — Niet the Dark Absol, Apr 17 '12 at 03:06
I was testing it by switching tabs back and forth to see if it was working like it should be. I tried using alerts like I usually do but they weren't working out :) — Benjamin Thvedt, Apr 17 '12 at 03:26

score 4 · Accepted Answer · answered Apr 17 '12 at 03:07

4

Add stopLightning() to the beginning to goLightning(), before setting the new intervals.

answered Apr 17 '12 at 03:07

Niet the Dark Absol

320,036
81
464
592

Thanks! Worked like a charm. I'm still unclear why it's necessary to do that, but I'll go with it for now! – Benjamin Thvedt Apr 17 '12 at 03:28

score 1 · Answer 2 · answered Apr 17 '12 at 03:15

Re-arrange the following lines:

goLightning();
window.onblur = stopLightning;
window.onfocus = goLightning;
var int1; var int2; var int3;

in to this instead:

var int1, int2, int3, w = window;
w.onblur = stopLightning;
w.onfocus = goLightning;
goLightning();

Next, use the variable w instead of window in the stopLightning() function to ensure you use a reference to the proper window. Also, as @Kolink mentioned, it wouldn't hurt to put a call to stopLightning() at the beginning of your goLightning() function to ensure you don't have multiple instances running in the event the focus event gets fired more than once.

EDIT I moved the call to goLightning() after having set up the events - untested but I think it would be better that way?

I tried your rearrangement, but still had the problem. Adding stopLightning to the beginning of goLightning appeared to solve the problem though — Benjamin Thvedt, Apr 17 '12 at 03:50

Javascript/jQuery can't seem to get ClearInterval to work

2 Answers2